Question

我一直试图让这个我该死的布局工作这么长时间以及它的超级fr。我是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;
}

我能做些什么来达到这个效果？

Answer 1

您正在寻找的是一个“粘性页脚”。

较旧的仅限CSS的方法要求您知道页脚的确切高度。我通过快速Google搜索找到的最佳解决方案是Ryan Fait's Sticky Footer。 Ryan的教程的工作原理是将100％的高度放在包装元素上（包含除页脚之外的内容）。这个100％的高度是你的内容将页脚推到窗口底部的原因，然后页脚以负边距蠕动回到可见区域（这就是为什么你需要知道页脚的高度...负边距必须与页脚元素的高度相同。还有一些额外的部分可以让它在所有浏览器中可靠地运行（例如<div class="push"></div>），但这基本上就是发生了什么。
较新的仅CSS解决方案需要使用display: table;（IE7不支持），但允许使用可变高度页脚（请参阅Sticky CSS footers: The flexible way）。这可能是我推荐的方法。

第二篇文章的作者提到Javascript可以用来添加IE7支持，但是没有编写实际的Javascript。在回答这个问题时，StatCounter列出IE7的市场渗透率约为1.28％。我会留给你来确定IE7支持是否重要，但是如果我愿意，我想加上0.02美元:-p首先，IE7的所有用户都有IE8的升级路径，拒绝更新的用户是只会让网页开发人员的生活更加困难（IE7到IE8为许多重要的CSS2选择器开辟了可能性，并修复了许多唠叨的浮动问题并使display: table;成为可能）。除了让网络开发人员的生活变得更加困难之外，他们还会向众多浏览器黑客敞开心扉，这些黑客会破坏他们的计算机，使他们成为黑客寻求扩展他们的僵尸军队的一个容易的目标（这使得security more difficult for everyone else）。第二，Do websites need to look exactly the same in every browser?（当然，答案是“否”）只要在浏览器窗口底部有一个页脚可以被认为是渐进增强，你就不必担心。

话虽如此......我更新了代码以便它可以在IE7中运行:-p请查看jsfiddle并告诉我它是如何工作的。

Answer 2

使用Css位置：已修复

您可以参考此链接以获取有关它的更多信息。 http://www.w3schools.com/cssref/pr_class_position.asp

如何将页面内容拉伸并将页脚粘贴到页面底部？

2 个答案: