Question

这是我目前使用的代码：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">
    &#169; 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上玩了一下后，我没有太多运气，我确信这样做有正确和错误的方法。

有人应该让我成为实现这一目标的最佳途径吗？

Answer 1

这会使您的中心列占屏幕宽度的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>

Answer 2

#main {
    width: 900px;
    margin: 0 auto;
}

Answer 3

只需定义css

#main {
    background-color: purple;
    margin: auto;
    overflow: auto;
    padding-bottom: 60px;
    width: 90%;
}

Answer 4

根据我的低估，我创造了一个jsfiddle。如果您还有其他问题，请查看并告诉我。

<强>样本

http://jsfiddle.net/saorabhkr/3Ak7S/1/

修改

我做了一些改动，请看看。

http://jsfiddle.net/saorabhkr/3Ak7S/5/

Answer 5

将页眉和页脚设置为100％宽度，并将内容置于其中心，然后将主体居中。

页脚很容易实现，因为它已经设置为position：relative。在页脚内添加另一个div，它将容纳宽度为900px的内容，position：absolute，left：50％，左边距为-450px。

对标题和正文使用相同的方法。

Appologies，我会添加一些代码来说明但我在我的iPhone上 - 这需要几个小时＆gt; _＆lt;当我接触到真正的键盘时，我会编辑澄清。

页眉和页脚宽度100％，内容仅900px宽

5 个答案: