我有一个主容器,整个网站都围绕着这个容器。
在容器内部,除了所有页眉、文本和页脚等。我有一些可上下滑动的可扩展 div,因此需要让容器的整体高度适应扩展 div 的大小。
现在,我在使用:height:100% 之前已经完成了此操作,但出于某种原因,这会导致容器的边框效果消失。它似乎只适用于固定高度,例如:height:1000px。
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:(非常像这样)
<div id="container">
<div id="top-banner">
<div id="logo"></div>
</div>
<div id="col1">text+expandable divs</div>
</div>
我做错了什么吗?
最佳答案
当您将 height: 100%;
设置为 relative
时,这意味着 #container
的高度应为 100%
与 container
id 的父级相关,在本例中应为 body
。
设置 body,html{height:100%}
应该可以!
例如
<div id="wrapper">
<div class="container">
</div>
</div>
如果你必须给
.container
{
height: 100%;
position: relative
}
然后
#wrapper
{
height:100%;
}
是必须的!
关于html - CSS - 自动 div 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20706024/