1
嗨，我有一个css样式表，它工作正常，直到你缩小窗口，然后页脚逐渐向上移动，我一直在寻找它很长一段时间，我真的找出什么是错我的代码这里是我的CSS STLE表：css页脚在窗口缩小时向上移动
/* *
* 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>
提前感谢！
都能跟得上只是做该div它的最小尺寸，即使如此，它仍然留在原来的位置，并在其下方溢出文字 – Houlahan 2010-11-18 19:34:36