我在构建网站时遇到问题。我有一个简单的 div 布局。具体如下:
<body>
<div id="Container">
<div id="Logo"></div>
<div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
我的 CSS 如下:
@charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
最后可以在这里看到结果:
如您所见，当您向下滚动页面时，“容器”div 不会随内容一起展开。我知道这可能是一件非常简单的事情，但我今天脑力不足。哈哈。
最佳答案
尝试添加:
#container { min-height: 100%; }
在 高度 100% 之后。您可能还想尝试:
#container { overflow: auto; }
关于CSS 父 DIV 溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1760791/