我有一个整个网站所在的主要容器。
在容器内,除了所有标题,文本和&我有一些可扩展的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>
我做错了吗?
答案 0 :(得分:4)
当您将height: 100%;
设置为relative
时,这意味着#container
应该具有与100%
id的父级相关的高度container
,其中这种情况应该是body
。
设置body,html{height:100%}
,这应该有效!
<强>例如强>
<div id="wrapper">
<div class="container">
</div>
</div>
如果你必须提供
.container
{
height: 100%;
position: relative
}
然后
#wrapper
{
height:100%;
}
是必须的!
答案 1 :(得分:1)
它消失了,因为100%的值,你的容器的高度与你的身体标签的高度相同。所以你必须像这样扩展你的身体和你的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);
}
在某些浏览器中,您必须添加min-height:95%。
以下是解决方案:http://jsfiddle.net/axv5j/
答案 2 :(得分:0)
添加了一个包装器,并将HTML,body设置为100%height:
html, body {
height: 100%;
}
#wrapper{
height:100%;
}
然后补充说:
padding-bottom:150px;
到容器中以增加足以覆盖内容的大小。