这是我目前正在使用的代码:http://jsfiddle.net/HMsKa/39/
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Title</title>
<link href="main2.css" rel="stylesheet" type="text/css">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
<ul>
<li><a href="/posts/list/">Link1</a></li>
<li><a href="/posts/create/">Link 2</a></li>
<li><a href="/about">Link 3</a></li>
</ul>
</div>
<div id="main">
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
</div>
</div>
<div id="footer">
© 2012 Company, Inc.
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/privacy">Privacy</a></li>
</ul>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px; /* must be same height as the footer */
overflow:auto;
background-color: purple;
}
#footer {
height: 60px;
margin-top: -60px; /* negative value of footer height */
position: relative;
clear:both;
background-color: blue;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#header {
background-color: orange;
height: 60px;
}
我正在尝试在 stackoverflow 上进行设置，其中页眉和页脚的背景一直延伸到整个页面，但页眉内容、页脚内容和主要内容位于固定宽度的列中页面的中间。在 JSFiddle 上玩了一会儿之后，我运气不太好，我确信这样做有正确和错误的方法。
有人可以告诉我实现此目标的最佳方法吗？
最佳答案
这将使您的中心列占屏幕宽度的 80%:
#main {
width: 80%;
margin: 0 auto;
}
这将使它固定在 900px:
#main {
width: 900px;
margin: 0 auto;
}
编辑:
#header {
width: 100%;
}
#header_content {
width: 900px;
margin: 0 auto;
}
#main {
width: 900px;
margin: 0 auto;
}
HTML:
<div id="header">
<div id="header_content">My header content, 900px in width</div>
</div>
<div id="main">
My main content, also 900px in width;
</div>
关于html - 页眉和页脚 100% 宽度，内容仅 900 像素宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12835002/