创建一个显示尺寸与其内容尺寸不同的 div答案

【问题标题】：Creating a div whose display dimensions are different than it's contents dimensions创建一个显示尺寸与其内容尺寸不同的 div
【发布时间】：2011-10-17 18:22:47
【问题描述】：

我希望能够制作一个 div，允许用户将内容动态添加到特定位置，例如 100 像素 x 200 像素的区域，但只会显示 50 像素 x 100 像素的窗口供用户放置内容。用户将滚动以到达 div 的其余部分。如何使用 CSS 或 JavaScript 做到这一点？

修改

我希望我的 div 的高度和宽度以 100x200 开始，但只显示一个尺寸为 50x100 的窗口，并带有一个滚动条，让用户可以到达 div 的其余部分。

【问题讨论】：

标签： javascript html css

【解决方案1】：

CSS：

#myDiv  {
    width:100px;
    height:50px;
    overflow:auto;
}

溢出在这里发挥了魔力。

【讨论】：

但我不想在添加内容时添加到 div，我希望它的高度和宽度分别为 100 和 200，但只让它显示一个 50x100 的窗口，并带有一个滚动条让您到达 div 的其余部分。抱歉，我在最初的问题中没有说清楚。我会修改并接受你的回答：）

【解决方案2】：

试试这个：

HTML：

<div id="window">
    <div id="content">
    </div>
</div>

CSS：

#window {
    width: 50px;
    height: 100px;
    overflow: auto;
}

#content {
    width: 100px;
    height: 200px;
}

【讨论】：

【解决方案3】：

HTML：

<div id="myDivWindow">
 <div id="myDiv">
 </div>
<div>

CSS：

#myDivWindow  {
    width:50px;
    height:100px;
    overflow:auto;
}

#myDiv  {
    width:100px;
    height:200px;
}

将您的内容添加到 myDiv

【讨论】：

【解决方案4】：

最简单的方法是只使用 2 个 div。像这样……

<div style="width:100px;height:50px;overflow:auto;">
<div style="width:200px;height:100px;overflow:none;">
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
</div>
</div>

如果你不想在你的 html 中嵌套这样的 div 元素，你可以添加一个 class 或 id 并使用 JavaScript 动态添加和设置第二个 div 的样式。

【讨论】：