Div高度100％并扩展以适应内容
我的页面上有一个div元素，其高度设置为100％。 身体的高度也被设定为100％。 内部div有一个背景，所有这一切，是不同的身体背景。 这适用于使div高度达到浏览器屏幕高度的100％，但是问题是我的内容里面的内容超出了浏览器屏幕高度的垂直范围。 当我向下滚动时，div结束于必须开始滚动页面的位置，但内容溢出。 如何让div始终走到底部以适应内在的内容？
这是我的CSS简化：
body { height:100%; background:red; } #some_div { height:100%; background:black; } 一旦我滚动页面，黑色结束，内容stream入红色的背景。 这个问题在#some_div上设置为相对或绝对位置似乎并不重要，问题也会出现。 #some_div里面的内容绝大部分是绝对定位的，它是从数据库dynamic生成的，所以它的高度是不可预知的。
编辑：这是一个问题的截图： 
这里是你应该做的CSS样式，主要的div
display:block; overflow:auto;
而且不要碰height
将height设置为auto和min-height为100% 。 这应该可以解决大多数浏览器的问题。
body { position: relative; height: auto; min-height: 100% !important; }
通常这个问题出现在Parent Div的Child元素被浮动时。 这是问题的最新解决scheme ：
在你的CSS文件中，写下下面的类，叫做.clearfix和伪select器：after
.clearfix:after { content: ""; display: table; clear: both; }
然后，在您的HTML中，将.clearfix类添加到您的父级Div。 例如：
<div class="clearfix"> <div></div> <div></div> </div>
它应该始终工作。 您可以将类名称调用.group而不是.clearfix ，因为它会使代码更加语义化。 请注意，在双引号“”之间不需要在内容的值中添加点或甚至空格。 另外， 溢出：自动; 可能会解决问题，但会导致其他问题，如显示滚动条，不build议。
来源：Lisa Catalano和Chris Coyier博客
如果你只是离开height: 100%并使用display:block; div将占用div内容的空间。 这样所有的文字都会留在黑色背景中。
尝试这个：
body { min-height:100%; background:red; } #some_div { min-height:100%; background:black; }
IE6和更早版本不支持最小高度属性。
我认为问题是当你告诉身体有100％的高度时，它的背景只能和一个浏览器“视口”的高度一样高（不包括浏览器工具栏＆状态栏＆菜单栏和窗口边缘）。 如果内容比一个视口高，则会溢出投影到背景的高度。
如果你的内容没有把整个页面填充到底部，这个身体的最小高度属性应该强制背景至less和一个视口一样高，但是它也应该让它向下增长以包含更多的内部内容。
老问题，但在我的情况下，我发现使用的position:fixed解决了我。 虽然我的情况可能有点不同。 我有一个覆盖半透明的div与加载animation，我需要显示，而页面加载。 所以使用height:auto / 100%或min-height: 100%都填满了窗口，但不是在屏幕外的区域。 使用position:fixed与用户进行叠加滚动，所以它总是覆盖可见区域，并保持我的预加载animation居中在屏幕上。
我不完全确定，我已经理解了这个问题，因为这是一个相当直接的答案，但是这里是… 🙂
你有没有尝试设置容器的溢出属性可见或自动？
#some_div { height:100%; background:black; overflow: visible; }
添加应该将黑色容器推到dynamic容器需要的大小。 我喜欢自动显示，因为汽车似乎与滚动条来…
现代浏览器支持“视口高度”单位。 这会将div扩展到可用的视口高度。 我发现它比任何其他方法更可靠。
#some_div { height: 100vh; background: black; }
即使你可以这样做
display:block; overflow:auto; height: 100%;
这将包括您的每个dynamic股利每个内容。 假设如果你有一个普通的类，它会根据内容增加每个dynamicdiv的高度
我看了几个答案，并将它们结合起来。 这里是：
#some-div { overflow:scroll; display:block; min-height:100%; }
这个答案效果最好，因为当前支持的答案打开了溢出的自动选项（这与在某些浏览器中的滚动不同）。 这也可以让你设置一个最小的高度，不像接受的答案，你不能触摸的高度。
