浏览器窗口大小调整会影响CSS布局
我正在尝试创建一个布局，其中页眉和页脚的宽度为100%，而容器的宽度为940px。我在博客和新闻网站上看到过这样的例子。与浮动包含的内容不同，它具有锚定到页面顶部和底部的外观 另外，我正在创建的网站只有几个页面，所以我将导航放置在标题中。导航通过使用绝对定位来居中 当我缩小窗口（在任何浏览器中）时，所有内容都保持在原来的位置，除了我看到一个白色背景覆盖了标题下的内容。我不知道为什么会发生这种情况，但我认为下拉菜单可能导致了一个问题。谢谢 以下是我的CSS代码：浏览器窗口大小调整会影响CSS布局,css,background,html-lists,css-float,Css,Background,Html Lists,Css Float,我正在尝试创建一个布局，其中页眉和页脚的宽度为100%，而容器的宽度为940px。我在博客和新闻网站上看到过这样的例子。与浮动包含的内容不同，它具有锚定到页面顶部和底部的外观 另外，我正在创建的网站只有几个页面，所以我将导航放置在标题中。导航通过使用绝对定位来居中 当我缩小窗口（在任何浏览器中）时，所有内容都保持在原来的位置，除了我看到一个白色背景覆盖了标题下的内容。我不知道为什么会发生这种情况，但我认为下拉菜单可能导致了一个问题。谢谢 以下是我的CSS代码： body,html,ul,li{
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;
}
<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>
第1栏
Lorem ipsum dolor sit amet，是一位杰出的领导者。莫里斯·韦尔马格纳。Mauris risus nunc、tristique varius、年孕产妇、lacinia vel、elit。Nam ornare，felis non faucibus molestie，nulla augue Adipising mauris，一种非乌米直径的舌苔。帕雷森特·瓦里乌斯。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯
献祭精英
无主语。普雷森特·图皮斯·里贝罗、普雷蒂姆·里、普雷蒂姆·ac、马莱苏达·塞德、利古拉。这是一只乌尔纳-欧佩斯-卢克图斯-福西布斯。弗里利亚库拉比图尔酒店。她坐在码头上。这是一个自由的发酵罐。前庭蜗壳位于颞侧。暂时性抽搐。在同侧温和的酒后驾车。这是一个很好的例子。莫里斯·森佩尔是一名精英。特里斯蒂克万岁。佩伦茨克·法雷特拉·安特在佩德。在ultrices ArcuVitae purus。在rutrum，莫利斯·康塞卡特的埃拉特，利奥·马萨·康塞卡特·利伯罗，自由电视台的交流前庭。Lorem ipsum dolor sit amet，是一位杰出的领导者
第2栏
Lorem ipsum dolor sit amet，是一位杰出的领导者。莫里斯·韦尔马格纳
aaaaa aaaa
谢谢你应该给出你身体的最小宽度
body{
min-width:940px;
}