0

这是我目前正在使用的代码：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 上玩了一会儿之后，我运气不太好，我确信这样做有对错之分。

有人可以让我以最好的方式实现这一目标吗？

4

5 回答 5

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>
于 2012-10-11T08:15:16.873 回答
0

将页眉和页脚设置为 100% 宽度，并将其中的内容居中，然后将正文居中。

这对于页脚来说很容易，因为它已经设置为 position:relative。在页脚中添加另一个 div，它将包含宽度为 900 像素、位置：绝对、左：50% 和 -450 像素的左边距的内容。

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

Appologies，我会添加一些代码来说明，但我在我的 iPhone 上 - 这需要我几个小时 >_< 当我可以使用真正的键盘时，我将进行编辑以澄清。

于 2012-10-11T08:33:42.497 回答
0

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

演示

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

编辑

我做了一些更改，请看一下。

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

于 2012-10-11T08:23:29.587 回答
0

只定义css

#main {
    background-color: purple;
    margin: auto;
    overflow: auto;
    padding-bottom: 60px;
    width: 90%;
}
于 2012-10-11T08:14:03.253 回答
0 
#main {
    width: 900px;
    margin: 0 auto;
}
于 2012-10-11T08:12:55.620 回答