Html CSS - 自动 div 高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20706024/
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 - Automatic div height?
提问by MRC
I have a main container where the whole site is based around.
我有一个主容器，整个站点都基于其中。
Inside the container, other than all the headers, text & footers etc. I have some expandable div's which slide up and down, thus the need to have the overall height of the container to adjust to the size of the expanded divs.
在容器内部，除了所有的页眉、文本和页脚等。我有一些可扩展的 div，它们可以上下滑动，因此需要使容器的整体高度适应扩展的 div 的大小。
Now, I have done this before just using: height:100%, but for some reason, that causes the border effects of the container to disappear. It only seems to work with a fixed height such as: height:1000px.
现在，我在使用：height:100% 之前已经这样做了，但由于某种原因，这会导致容器的边框效果消失。它似乎只适用于固定高度，例如：height:1000px。
CSS:
CSS：
#container {
position: relative;
top: 5px;
width: 980px;
height: 100%;
margin: 0 auto 0;
box-shadow: 0 0 5px rgba(159,159,159,0.6);
-o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
-webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
-moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
}
HTML:(pretty much like this)
HTML：（很像这样）
<div id="container">
<div id="top-banner">
<div id="logo"></div>
</div>
<div id="col1">text+expandable divs</div>
</div>
Am I doing something wrong?
难道我做错了什么？
回答by NoobEditor
when you are setting height: 100%;as relativethen this means that #containershould have height 100%in relation to the parent of containerid, which in this case should be body.
当您设置height: 100%;为relativethen 这意味着#container应该具有100%相对于containerid的父级的高度，在这种情况下应该是body.
Set body,html{height:100%}and this should work!
设置 body,html{height:100%}，这应该可以工作！
Eg
例如
<div id="wrapper">
<div class="container">
</div>
</div>
If you have to give
如果你必须给
.container
{
height: 100%;
position: relative
}
then
然后
#wrapper
{
height:100%;
}
is a must!
是必须的！
回答by Alexandre Tranchant
It disappears, because with the 100% value, your container's height is the same as that of your body tag. So you have to extend your body and your html tags like this:
它消失了，因为使用 100% 值，您的容器的高度与您的 body 标签的高度相同。所以你必须像这样扩展你的 body 和你的 html 标签：
html{
height: 95%;
}
body{
height: 95%;
}
#container {
position: relative;
top: 5px;
width: 980px;
height: 100%;
margin: 0 auto 0;
box-shadow: 0 0 5px rgba(159,159,159,0.6);
-o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
-webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
-moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
}
On some browsers, you have to add min-height:95%.
在某些浏览器上，您必须添加 min-height:95%。
Here is the solution : http://jsfiddle.net/axv5j/
这是解决方案：http: //jsfiddle.net/axv5j/
回答by MRC
Added a wrapper, and set HTML, body to 100% height:
添加了一个包装器，并将 HTML、body 设置为 100% 高度：
html, body {
height: 100%;
}
#wrapper{
height:100%;
}
Then added:
然后补充道：
padding-bottom:150px;
to the container to increase the size enough to cover the content.
到容器以增加足够的大小以覆盖内容。
