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保持小于内容时页面会滚动。

发生这种情况的原因是因为你把最大高度：500px;在你的div。在这样做时你会说'无论什么都不超过500px。如果你将min-height设置为500px，那么它总是500px，除非你需要它更大以适应内容。

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

限制div高度

2 个答案: