Html CSS div 高度不会扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1966447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS div height won't expand
提问by Douglas
I have a sidebar DIV that i want to expand vertically to match its containing div.
我有一个侧边栏 DIV，我想垂直扩展它以匹配其包含的 div。
I have done this to accomplish that
我这样做是为了完成那个
html, body, #wrapper, #content, #sidebar{
height:100%;
}
But the wrapper, content, and sidebar never expand past about 1000px, even when the content is several times that.
但是包装器、内容和侧边栏永远不会扩展超过 1000 像素，即使内容是它的几倍。
I believe this is because the content of #wrapper, #contentare entirely floated DIVs.
我相信这是因为内容#wrapper，#content都是完全浮动的DIV。
I have tried to put empty DIVs with clear:bothas the last element in #wrapperand #content, but to no avail.
我试图将空 DIVclear:both作为最后一个元素放在#wrapperand 中#content，但无济于事。
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
....
<div class="clear"/>
</div>
<div class="clear"/>
</div>
</body>
note: footer is fixed position
注意：页脚是固定位置
采纳答案by BigName
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:
问题是你将 100% 设置为 html、body 和 #wrapper，这会强制他们的身高成为他们父母的身高，#wrapper 的父母是 body，body 是 html，html 的父母是什么？我不确定，我猜是浏览器窗口（或其视口），如果是这样，那么 #wrapper 的高度将始终等于浏览器窗口的高度，所以如果您的浏览器窗口的高度是 1000px，那么
#wrapper的高度将始终为 1000px，并且因为您将 100% 设置为 #sidebar 和 #content，它们的高度也将始终为 1000px，尽管内部元素的高度
如果我是对的，您应该做的是单独设置 html 的高度，将其他人的高度保持为 100%，并将 html 的 min-height 设置为 100% 并保留高度。理论上，这将强制 html 至少与浏览器窗口一样高，但是当内部元素高于浏览器时会扩展，尽管我还没有测试过。
让我知道我是否正确。
编辑：我测试了它，它有效。只需这样做：
html,
body{
min-height: 100%;
}
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.
html,
body{
min-height: 100%;
}
不要设置高度，如果您希望考虑内部元素的高度，请确保清除浮动并且内部元素没有绝对定位。现在，当没有足够的元素来推送它时，body 将占据浏览器窗口的整个视口，当有元素时，body 将扩展到页面的最底部，而不仅仅是浏览器窗口。
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.
在chrome中测试过，应该在firefox中工作，
也不知道ie。
不，实际上，在第二次测试中，它
似乎仅在父级具有给定高度（例如高度：500px 或高度：100%）时才起作用，高度：100% 将起作用；当父元素有 min-height: 100% 且没有高度时，内部元素不能使用 height: 100% 来匹配父元素。
回答by Andre
I can see no need to set height of those elements to 100%. you are saying, "I have a sidebar DIV that i want to expand vertically to match its containing div." Do you mean you want the height of the sidebar to match the height of the #content DIV? In that case, consider "faux columns" method, described here. Another way would be to calculate the height of the #content div with Javascript, and applythat height to #sidebar.
我看不出需要将这些元素的高度设置为 100%。你是说，“我有一个侧边栏 DIV，我想垂直扩展它以匹配其包含的 div。” 你的意思是你想让侧边栏的高度与#content DIV 的高度相匹配？在这种情况下，请考虑此处描述的“假列”方法。另一种方法是使用 Javascript 计算 #content div 的高度，并将该高度应用于 #sidebar。
To properly clear floats, the clearing element should be placed AFTER the floating element, not inside of it. One useful trick that I often use myself is pseudo-selector :AFTER. Suppose, you have to clear #content. Then:
要正确清除浮动，清除元素应放置在浮动元素之后，而不是在其内部。我自己经常使用的一个有用的技巧是伪选择器：AFTER。假设，您必须清除#content。然后：
#content:after
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
This will place an invisible element after your element, and it will clear your element.
这将在您的元素之后放置一个不可见的元素，并将清除您的元素。
回答by Alsciende
To have a div match the height of its container, you can use positioning:
要让 div 与其容器的高度匹配，您可以使用定位：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#wrapper{position:absolute;top:0px;right:0px;bottom:0px;left:0px}
#footer{position:absolute;height:100px;right:0px;bottom:0px;left:0px;background:green}
#sidebar{position:absolute;width:200px;top:0px;bottom:100px;left:0px;background:blue}
#content{position:absolute;top:0px;right:0px;bottom:100px;left:200px;background:red}
</style>
</head>
<body>
<div id="wrapper">
<div id="footer">
</div>
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
</body>
</html>
回答by MindsMonk
from what I can tell its based on the float:left/rightremove that and it will adjust
从我可以告诉它基于float:left/right删除它，它会调整
