0
我一直试图让这个我该死的布局工作了很长时间，现在它超级frusterating。我是CSS新手，所以请简单，但我查了很多关于粘脚和伸展内容等的文章，但我仍然无法使用它。最低高度对我没有任何帮助！如何让页面内容伸展并将页脚粘贴到页面底部？
Here is what i want my site to look like when it doesn't have enough content to fill a page.
And this is what i want it to look like when the content makes you scroll.
下面是HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageHeader">
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>
<div id="navigation">
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="./about.html">About Me</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
<div id="main">
<div>
<h2>What the hell?</h2>
<p>
This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
</p>
</div>
<div>
<h2> Why? </h2>
<p> As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
</p>
</div>
</div>
<div id="pageFooter">
<p> This is a footer
</p>
</div>
</div>
</body>
</html>
这里是CSS：
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* Global Styles */
html{
background: url(./images/sway.jpg);
background-attachment: fixed;
background-repeat::no-repeat;
}
body {
width: 80%;
margin: 0 auto;
}
/* pageHeader Styles */
#pageHeader{
height: 100px;
background:#999;
}
#pageHeader h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageHeader p{
padding-left: 40px;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
/* navigation Styles */
#navigation{
float:left;
width:100%;
background: #0CF;
overflow: hidden;
position: relative;
}
#navigation ul{
}
#navigation li{
float: left;
margin: 0 20px;
font-size: 1.5em;
}
#navigation li a:link {color:#F60;} /* unvisited link */
#navigation li a:visited {color:##89ABFC;} /* visited link */
#navigation li a:hover {color:#3FF;} /* mouse over link */
#navigation li a:active {color:#009;} /* selected link */
/* main Styles */
#main{
width: 80%;
margin: 0 auto;
border: 2px solid black;
background: #999;
color: #FFF;
}
/* pageFooter Styles */
#pageFooter{
height: 100px;
background:#999;
}
#pageFooter h1 {
padding-left: 30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 3.5em;
color:#F93;
}
#pageFooter p{
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: white;
}
我能做些什么来达到这种效果呢？
欢迎来到SO！如果您希望人们帮助您，请避免使用粗言秽语，过长的代码片段和未格式化的代码，如果您确实需要粘贴一些代码。更好的是，考虑提供一个链接到您的在线沙箱，或者在http://pastebin.me/或http://jsfiddle.net/或http://jsbin.com/或类似网站上设置一个准系统示例。 – Systembolaget