頁眉和頁腳寬度為100％，內容寬度僅為900px

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，位置：絕對，左側：50％和左側邊距為-450px的內容。

標頭和正文使用相同的方法。

應用程序方面，我會添加一些代碼來說明，但是我在iPhone上-我需要花費幾個小時的時間，__ <當我接觸到真正的鍵盤時，我將進行編輯以進行澄清。

頁眉和頁腳寬度為100％，內容寬度僅為900px

問題描述

5 個解決方案

解決方案1
1 已采納 2012-10-11 08:15:16

解決方案2
0 2012-10-11 08:12:55

解決方案3
0 2012-10-11 08:14:03

解決方案4
0 2012-10-11 08:23:29

解決方案5
0 2012-10-11 08:33:42

頁眉和頁腳寬度為100％，內容寬度僅為900px

問題描述

5 個解決方案

解決方案1 1 已采納 2012-10-11 08:15:16

解決方案2 0 2012-10-11 08:12:55

解決方案3 0 2012-10-11 08:14:03

解決方案4 0 2012-10-11 08:23:29

解決方案5 0 2012-10-11 08:33:42

解決方案1
1 已采納 2012-10-11 08:15:16

解決方案2
0 2012-10-11 08:12:55

解決方案3
0 2012-10-11 08:14:03

解決方案4
0 2012-10-11 08:23:29

解決方案5
0 2012-10-11 08:33:42