动态添加DIV但保持容器的宽度和高度固定

Question

我想动态地将<div>some content</div>添加到容器中但是我希望此容器具有固定的高度和宽度，即添加的div应该自我缩放以适合容器（因此也避免容器中的滚动条。）

将容器的高度设置为100％似乎不起作用，因为它可以扩展以容纳div。

这或多或少是jsfiddle.net对这四个iframe所做的事情（例如尝试调整窗口大小）。

有没有办法通过CSS实现这一目标？

示例代码

<div class="container">
<div class="added"> Some content </div>
<div class="added"> Some content </div>
</div>  

式

#container { height: 100%; width: 100% }
.added { min-height: 200px; min-width: 200px; }

Answer 1

尝试将overflow设置为hidden：

#container { height: 100%; width: 100%; overflow: hidden; }

Answer 2

jsfiddle.net使用iframe，您可以在overflow:scroll中使用#container，但#container { height: 100%; width: 100% }将依赖于它的父元素，因此您可以制作：

#container { height: 500px; width: 200px; overflow:scroll }

Answer 3

为什么不扭转呢？你说你希望容器具有固定的高度和宽度，但是你要使它具有动态的高度和宽度。

#container { height: 500px; width: 500px } // or whatever
.added { height: 50%; width: 50%; }

Answer 4

试试这个：

#container { height: 500px; width: 200px; position: relative; overflow: hidden }
.added { position: absolute; width: 100%; height: 100%; }