我一直在努力让这个我该死的布局工作这么久，但它非常令人沮丧。我是 CSS 的新手，所以请放轻松，但我已经查阅了很多关于粘性页脚和拉伸(stretch)内容等的文章，但我仍然无法让它工作。最小高度对我没有任何帮助!
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;
}
我该怎么做才能达到这种效果？
最佳答案
您正在寻找的是“粘性页脚”。
旧的纯 CSS 方法要求您知道页脚的确切高度。我能够通过快速谷歌搜索找到的最佳解决方案是 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 的途径，拒绝更新的用户是只会让 Web 开发人员的生活变得更加困难(IE7 到 IE8 为许多重要的 CSS2 选择器提供了可能性，并修复了许多烦人的 float 问题并使 display: table; 成为可能)。除了让 Web 开发人员的生活更加艰难之外，他们还让自己容易受到大量浏览器黑客的攻击，这些攻击会危及他们的计算机，使他们很容易成为寻求扩大僵尸大军的黑客的目标(这使得 security more difficult for everyone else )。二、Do websites need to look exactly the same in every browser? (当然，答案是否定的)只要在浏览器窗口底部有一个页脚可以被认为是一种渐进式增强，您就不必担心。
话虽这么说......我更新了代码所以它应该在 IE7 中工作:-p 请看一下 jsfiddle并告诉我它是如何工作的。
关于css - 如何让页面内容拉伸(stretch)并将页脚粘贴到页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12119755/