html - 限制div高度

Question

有人可以解释为什么当我告诉一个 div 时：

• 它的高度是500px，它的最大高度也是500px，

• 如果他需要溢出（自动）。

当在 div 中动态放置元素时，它会增长到它需要的大小，考虑到我的限制，整个页面将滚动而不是 div。

为什么？怎么修？

好的，对于最小的细节抱歉，我刚刚得到它，如果使用 display: inline-table，它会忽略我写的所有这些不起作用的东西......谢谢

Answer 1

以下似乎对我来说很好。在此处查看演示：http: //jsbin.com/iqigen/5/edit

<style>
  #box {
    height: 500px;
    overflow: auto;
  }
</style>
<div id="box"></div>

当嵌套元素的集体高度超过父级时，父级会进行溢出。当内容溢出时，将在父元素上显示一个滚动条，阻止超出其容器边界的子元素的任何视图。

您可以使用以下内容添加几个动态元素：

var colors = [ '#F00', '#660', '#066' ];

setInterval( addElement, 1000 );

function addElement(){
  $("<p>", { text: new Date() })
    .css( 'background', colors[ Math.floor( Math.random() * colors.length ) ] )
    .appendTo( "#hello" );
}

Answer 2

根据措辞不确定您要问什么。但是，如果您说 div 没有增长并且内容通过 div 到背景上，那么页面滚动而 div 保持小于内容。

会发生的原因是因为你放了一个 max-height: 500px; 在你的 div 上。在这样做时，您是在说'无论如何不要大于 500 像素。如果您将最小高度设置为 500 像素，那么它将始终为 500 像素，除非您需要它更大以适应内容。

如果这不是您要问的，我再次道歉。