CSS div高度不会扩展 [英] CSS div height won't expand
问题描述
我有一个侧边栏DIV，我想垂直扩展以匹配其包含的div。
I have a sidebar DIV that i want to expand vertically to match its containing div.
我已经做到这一点，以完成
I have done this to accomplish that
html, body, #wrapper, #content, #sidebar{
height:100%;
}
但是包装器，内容和边栏永远不会超过大约1000像素
But the wrapper, content, and sidebar never expand past about 1000px, even when the content is several times that.
我相信这是因为 #wrapper ， #content 是完全浮动的DIV。
I believe this is because the content of #wrapper, #content are entirely floated DIVs.
我试图用清除空白DIV：两个作为 #wrapper 和 #content ，但无效。
I have tried to put empty DIVs with clear:both as the last element in #wrapper and #content, but to no avail.
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
....
<div class="clear"/>
</div>
<div class="clear"/>
</div>
</body>
注意：footer是固定位置
note: footer is fixed position
推荐答案
问题是你设置100％到html，body和#wrapper，这迫使他们的身高是他们父母的身高，＃wrapper的父身体，身体的html，什么是html的父？我不知道，我猜猜浏览器窗口（或其视图端口），如果是这样，那么＃wrapper的高度将总是等于浏览器窗口的高度，所以如果你的浏览器窗口的高度是1000px，那么
#wrapper 的高度将始终为1000px，并且因为您将100％设置为#sidebar和#content，它们的高度将始终为1000px，内部元素
如果我是对的，你应该做的是分别设置html的高度，保持其他人的高度为100％，并将html的最小高度设置为100％并离开高度。在理论上，这将强制html至少与浏览器窗口一样高，但是当内部元素高于浏览器时，展开，虽然我没有测试它。
让我知道我是否对。
编辑：
I测试它，它工作。
只需这样：
the problem is you set 100% to html, body, and #wrapper, this forces their height to be their parents' height, #wrapper's parent is body, body's is html, what's html's parent? I'm not sure, i'm guessing the browser window (or its view port), if so, then #wrapper's height will always be equal to the browser window's height, so if your browser window's height is 1000px, then
#wrapper's height will always be 1000px, and because you set 100% to #sidebar and #content, their height will always be 1000px as well, despite the height of inner elements
if i was right, what you should do is set html's height separately, keep others' height to 100%, and set html's min-height to 100% and leave the height out. in theory, this will force html to be at least as high as the browser window, but expand when inner elements are higher than the browser, though i haven't tested it.
let me know if i was right or not.
Edit:
I tested it, it works.
just do this:
html,
body{
min-height: 100%;
}
不要设置高度，并确保清除浮动和没有绝对定位在内部元素上，如果您想要考虑内部元素的高度。现在，当没有足够的元素推送它时，body将占据浏览器窗口的整个视图端口，当有，则body将扩展到页面的最底部，而不仅仅是浏览器窗口。
don't set the height, and make sure clear the floats and no absolute positioning on inner elements if you want the inner elements' height to be taken into account. Now the body will occupy the whole view port of the browser window when there are not enough elements to push it, and when there are, the body will expand to the very bottom of the page, not just the browser window.
在chrome中测试它，并且应该在firefox中工作。
不知道ie。
，actaully，第二次测试，它无法工作
似乎只有当父级有一个给定的高度（例如：height：500px或height：100％），高度：100％将工作;当父元素的最小高度：100％且没有高度时，内部元素不能使用height：100％来匹配父级元素。
tested it in chrome and should work in firefox, too
don't know about ie.
no, actaully, on a second test, it failed to work
it seems only when the parent has a given height (eg. height: 500px or height: 100%), the height: 100% will work; when the parent element has min-height: 100% and no height, the inner element can not use height: 100% to match the parent.
这篇关于CSS div高度不会扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
