你好我有一个css样式表工作正常，直到你缩小窗口然后页脚逐渐向上移动，我一直在看它很长一段时间我真的很想弄清楚我的代码有什么问题在这里是我的css stle sheet：
/* *
* Misc *
* */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
h1{
font-size: 28px;
}
h2{
font-size: 16px;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* *
* Header *
* */
.header{
background: grey;
height: 90px;
color: white;
}
.header h1{
position: relative;
top: 20px;
float: left;
}
.header .searchBox{
position: relative;
top: 20px;
float: right;
}
.header .nav{
position: relative;
top: 50px;
}
.header .nav li{
padding: 3px 10px 3px 10px;
display: inline;
list-style: none;
margin: 5px;
background:black;
}
.header .nav ul {
text-align: center;
}
.header .nav li a{
text-decoration: none;
color: white;
}
.header .nav ul li a:hover{
background: lightgrey;
}
/* *
* Middle Content *
* */
.middle{
overflow:auto;
}
/* *
* Navigatioin *
* */
.navigation{
position:absolute;
background: #EEEEEE;
width: 130px;
float: left;
margin: 5px;
height: 70%;
border-right-style:solid;
border-right-width:2px;
}
.navigation h2{
text-align: center;
padding: 20px 20px 20px 20px;
}
.navigation .nav{
padding: 0px 10px 20px 0px;
text-align: right;
}
.navigation .nav li{
list-style: none;
}
/* *
* Content *
* */
.content {
background: #EEEEEE;
margin-left : 13px;
margin-right : 5px;
margin-top : 5px;
padding: 5px 5px 5px 5px;
position:absolute;
left: 130px;
overflow:auto;
}
.content .item{
background: #DDDDDD;
padding: 10px 10px 10px 10px;
margin: 5px;
}
.content .item p{
margin: 5px;
}
.content .item h2{
margin-left: -5px;
}
/* *
* Footer *
* */
.footer{
background: #EEEEEE;
height: 50px;
bottom: 0px;
position: absolute;
width: 100%
}
.footer .nav ul li{
padding: 10px 10px 10px 10px;
list-style: none;
margin: 5px;
white-space: nowrap;
display: inline;
}
.footer .nav ul {
text-align: center;
}
.footer .copyright{
text-align: center;
}
和页面的html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XYZ</title>
<link rel="stylesheet" type="text/css" href="Defult.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div class ="header">
<h1>XYZ</h1>
<div class ="searchBox">
<form action="">
<p><label>Search:<input type="text" /></label>
<input type="submit" value="Go"/>
</p>
</form>
</div>
<div class ="nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
</div>
<div class ="middle">
<div class ="navigation">
<h2>About</h2>
<div class="nav">
<ul>
<li><a href="#">Values</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">Company History</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Environmental Responsibility</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class ="content">
<h1>About XYZ</h1>
<div class ="item">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, ut libero ac aenean luctus, lacus blandit, consectetuer cras litora massa. Massa condimentum, etiam nunc, quis egestas quis magna vitae velit porttitor, pulvinar at vivamus. Odio nec posuere maecenas tincidunt, quam est id felis
adipiscing eros, condimentum ac lorem ante in. Molestie est risus nullam, sed dui dictum integer metus, praesent consequat nunc facilisis ante. Gravida tristique vivamus. Risus vel malesuada, dui malesuada lorem id, quam nibh at tellus id ullamcorper, ligula
vitae dictumst nisl leo. Sit natoque viverra sollicitudin diamlorem, eu massa lacinia pretium laoreet metus, rutrum ut odio molestie porta penatibus.
</p>
</div>
<div class ="item">
<h2>Sit Consequat Molestie</h2>
<p>Sit consequat molestie elit tempus et justo, conubia magna est, rutrum eleifend duis commodo ante mattis, posuere metus vel curabitur vitae leo purus. Vivamus gravida ante reprehenderit, consequat cursus id placerat, mauris ultrices, urna ultrices, ut suspendisse
accumsan imperdiet sit. Pede tristique rerum auctor suspendisse. Amet rutrum enim nullam tempor, a wisi, morbi vel volutpat sollicitudin platea, lectus velit nec. Dui sed, malesuada ac in, natoque vitae ornare interdum nulla et felis. Vitae praesent pede duis
varius lectus, suspendisse tincidunt, eleifend eget quis dolor donec ut. Felis porta ultricies, aliquam et luctus scelerisque parturient, massa ultricies et tempus eu ullamcorper mus. Donec maecenas nullam in, rutrum a, odio nibh ut tortor nunc sollicitudin
sem, scelerisque ac pede mollis massa vel ullamcorper, scelerisque velit nulla vestibulum.
</p>
</div>
<div class ="item">
<h2>Sapien Quisque Dictum</h2>
<p>Sapien quisque dictum arcu integer, elementum magna pharetra ipsum eu, nunc nulla id error odio nulla nec, pede non nec dolor mauris, eget id morbi. Nibh nibh imperdiet a imperdiet dapibus, sed auctor sed arcu morbi imperdiet in, morbi et ipsum mollis sem
massa ut. Ac sit nibh curabitur aliquet, arcu dictum varius justo. Ut in. Donec varius ad blandit, id praesent condimentum mauris magna adipiscing vitae, at dui libero nam sed ac nibh. Turpis et vel sem tempus, pellentesque id mi vitae eu eros, nonummy sagittis
eu, laoreet dolor praesent volutpat lorem, volutpat lorem sodales consequat in adipiscing convallis. Dolor ipsum integer vivamus adipiscing a tincidunt, nibh leo, vitae ac velit vestibulum porta porttitor amet, lacinia ut tortor aliquam.
</p>
</div>
</div>
</div>
<div class ="footer">
<div class ="nav">
<ul>
<li><a href="#">Site Index</a></li>
<li><a href="#">Legal Notice</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class ="copyright">
<p>© 2010 XYZ Trading Ltd.</p>
</div>
</div>
</body>
</html>
提前致谢！
答案 0 :(得分：0)
尝试使用position: fixed作为页脚。
答案 1 :(得分：0)
进行以下更改：
.footer{
background: #EEEEEE;
height: 50px;
position: relative;
width: 100%;
margin-top:20px;
}
.content {
background: #EEEEEE;
margin-left : 13px;
margin-right : 5px;
margin-top : 5px;
padding: 5px 5px 5px 5px;
position:relative;
overflow:auto;
}
.navigation{
position:relative;
background: #EEEEEE;
width: 130px;
float: left;
margin: 5px;
height: 70%;
border-right-style:solid;
border-right-width:2px;
}
您过度使用了absolute位置设置。从本质上讲，您实现了“粘性页脚”。
答案 2 :(得分：0)
对于position：absolute和bottom：0你的div将始终位于它的容器（body）的底部。当你调整屏幕大小时，它会像你说的那样移动。看起来你在你的css中使用position：absolute很多，这使得那些对象根据它们的位置不能有其他项目位置。
为了让您的页脚在内容的底部正确对齐，您必须将主容器（标题，中间，内容）切换为position：relative和float：left。
如果您希望页脚始终位于页面底部，即使内容未到达底部，也会更加复杂。
答案 3 :(得分：0)
尝试将min-height设置为页脚上方的内容区域
答案 4 :(得分：0)
如果没有脚本，您的请求很容易实现。您必须做出的一个让步就是让页脚的高度为百分比。
像这样（没有在IE中证明）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XYZ</title>
<link rel="stylesheet" type="text/css" href="Defult.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
#wrap { height:90%; position:relative; overflow-y:scroll; overflow-x:hidden; }
.footer { height:10%; margin:0; padding:0; min-height:35px;}
</style>
</head>
<body>
<div id="wrap">
<div class ="header">
<h1>XYZ</h1>
<div class ="searchBox">
<form action="">
<p><label>Search:<input type="text" /></label>
<input type="submit" value="Go"/>
</p>
</form>
</div>
<div class ="nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
</div>
<div class ="middle">
<div class ="navigation">
<h2>About</h2>
<div class="nav">
<ul>
<li><a href="#">Values</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">Company History</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Environmental Responsibility</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class ="content">
<h1>About XYZ</h1>
<div class ="item">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, ut libero ac aenean luctus, lacus blandit, consectetuer cras litora massa. Massa condimentum, etiam nunc, quis egestas quis magna vitae velit porttitor, pulvinar at vivamus. Odio nec posuere maecenas tincidunt, quam est id felis
adipiscing eros, condimentum ac lorem ante in. Molestie est risus nullam, sed dui dictum integer metus, praesent consequat nunc facilisis ante. Gravida tristique vivamus. Risus vel malesuada, dui malesuada lorem id, quam nibh at tellus id ullamcorper, ligula
vitae dictumst nisl leo. Sit natoque viverra sollicitudin diamlorem, eu massa lacinia pretium laoreet metus, rutrum ut odio molestie porta penatibus.
</p>
</div>
<div class ="item">
<h2>Sit Consequat Molestie</h2>
<p>Sit consequat molestie elit tempus et justo, conubia magna est, rutrum eleifend duis commodo ante mattis, posuere metus vel curabitur vitae leo purus. Vivamus gravida ante reprehenderit, consequat cursus id placerat, mauris ultrices, urna ultrices, ut suspendisse
accumsan imperdiet sit. Pede tristique rerum auctor suspendisse. Amet rutrum enim nullam tempor, a wisi, morbi vel volutpat sollicitudin platea, lectus velit nec. Dui sed, malesuada ac in, natoque vitae ornare interdum nulla et felis. Vitae praesent pede duis
varius lectus, suspendisse tincidunt, eleifend eget quis dolor donec ut. Felis porta ultricies, aliquam et luctus scelerisque parturient, massa ultricies et tempus eu ullamcorper mus. Donec maecenas nullam in, rutrum a, odio nibh ut tortor nunc sollicitudin
sem, scelerisque ac pede mollis massa vel ullamcorper, scelerisque velit nulla vestibulum.
</p>
</div>
<div class ="item">
<h2>Sapien Quisque Dictum</h2>
<p>Sapien quisque dictum arcu integer, elementum magna pharetra ipsum eu, nunc nulla id error odio nulla nec, pede non nec dolor mauris, eget id morbi. Nibh nibh imperdiet a imperdiet dapibus, sed auctor sed arcu morbi imperdiet in, morbi et ipsum mollis sem
massa ut. Ac sit nibh curabitur aliquet, arcu dictum varius justo. Ut in. Donec varius ad blandit, id praesent condimentum mauris magna adipiscing vitae, at dui libero nam sed ac nibh. Turpis et vel sem tempus, pellentesque id mi vitae eu eros, nonummy sagittis
eu, laoreet dolor praesent volutpat lorem, volutpat lorem sodales consequat in adipiscing convallis. Dolor ipsum integer vivamus adipiscing a tincidunt, nibh leo, vitae ac velit vestibulum porta porttitor amet, lacinia ut tortor aliquam.
</p>
</div>
</div>
</div>
</div><!--/wrap -->
<div class ="footer">
<div class ="nav">
<ul>
<li><a href="#">Site Index</a></li>
<li><a href="#">Legal Notice</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class ="copyright">
<p>© 2010 XYZ Trading Ltd.</p>
</div>
</div>
</body>
</html>