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