0
我试图创建页眉和页脚100％宽度的布局，而容器有940px的宽度。我在博客和新闻网站上看到过这样的例子。它不是浮动包含的内容，而是具有锚定到页面顶部和底部的外观。浏览器窗口大小调整影响CSS布局
而且我创建的网站只有几页，所以我已经放在报头内的导航。导航使用绝对定位居中。
当我缩小窗口（在任何浏览器），一切都保持在它的位置，只是我看到一个白色的背景覆盖标题下的内容。我不知道为什么会发生这种情况，但我认为下拉菜单可能会导致问题。由于
这里是我的CSS代码：
body,html,ul,li{
margin:0;
padding:0;
color:#000;
}
#wrap-head {
width:100%;
margin:0 auto;
background-image:url('header-bg.png');
}
#header {
width: 940px;
height: 140px;
max-height:130px;
position: relative;
margin-left:auto;
margin-right:auto;
padding: 0;
clear:both;
background-color: white;
}
.logo {
position: absolute;
top:0;
left:0;
}
#nav {
position:absolute;
top:48px;
left:470px;
}
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
z-index:5;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:6px;
color:#fff;
background:#0066ff;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#0066ff;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
left:0px;
background:#ccc;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#0066ff;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
/*-- MAIN BODY STYLES --*/
#wrap-body {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.875em;
background-color: black;
overflow:hidden;
}
h2 {
margin:0 0 1em;
}
#container {
width:940px;
margin:0 auto;
overflow:hidden;
background-color: #666666;
}
#content {
float:left;
width:640px;
padding:5px 10px;
background-color:#666666;
}
#sidebar {
float:right;
width:260px;
padding:5px 10px;
background:#CCC;
}
#footer {
clear:both;
padding:5px 10px;
background:#333;
}
#footer p {
margin:0;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
* html #footer {
height:1px;
}
#footercontent {
margin-left:auto;
margin-right: auto;
width: 940px;
height:126px;
padding:0px;
clear:both;
}
这里的HTML
<body>
<div id="wrap-head">
<div id="header">
<img class="logo" src="logotest.gif" width="280" height="110" />
<ul id="nav">
<li>
<a href="#" title="Return home">HOME</a>
</li>
<li>
<a href="#" title="About the IMHS">ABOUT IMHS</a>
<ul>
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">Mission Statement</a>
</li>
<li>
<a href="#">Member Profiles</a>
</li>
</ul>
</li>
<li>
<a href="#" title="News">NEWS</a>
</li>
<li>
<a href="#" title="Features">FEATURES</a>
<ul>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Book Reviews</a>
</li>
<li>
<a href="#">Monthly Feature</a>
</li>
<li>
<a href="#">IMH Schoolhouse</a>
</li>
</ul>
</li>
<li>
<a href="#" title="News">LINKS</a>
</li>
</ul>
</div>
</div>
<!--END OF NAVIGATION-->
<!--END OF NAVIGATION-->
<div id="wrap-body">
<div id="container">
<div id="content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p>aaaaa aaaa </p>
</div>
</div>
</div>
</body>
感谢