頁眉和頁腳100％寬度，內容只有900px寬

這是我與當前正在使用的代碼：http://jsfiddle.net/HMsKa/39/頁眉和頁腳100％寬度，內容只有900px寬

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上玩了一段時間後，我的運氣並不是很好，我確信有這樣做的正確和錯誤的方式。

有人應該是實現這一目標的最佳方式嗎？

來源

2012-10-11 James Willson

這會讓你的中心柱屏幕寬度的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-11 08:15:16 GarethL

雖然我想把頁眉和頁腳**內容**放在同一個900px的中間欄中。例如，如果我將頁眉和頁腳的寬度設置爲900px，則意味着背景顏色不再延伸 –

您可以使用Pramod建議的背景圖像，或者可以定義寬度爲100％的標題div，和一個標題內容div它寬度爲900px，margin auto。頁腳相同。我編輯了我的答案以顯示此 – GarethL

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

來源

2012-10-11 08:12:55

雖然我想把頁眉和頁腳**內容**放在同一個900px的中間欄中。例如，如果我將頁眉和頁腳的寬度設置爲900px，則意味着背景顏色不再延伸到 –

然後，將另一個div放在頁眉，主頁和腳註中，在其中放置當前代碼。然後它具有上面的css風格;） –

只要定義CSS

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

來源

2012-10-11 08:14:03

雖然我想將頁眉和頁腳**內容**放在同一個900px中心列中。例如，如果我將頁眉和頁腳的寬度設置爲900px，則意味着背景顏色不再延伸穿過 –

如果將背景色定義爲900px，但您可以將背景圖像放在主體中，則不會延伸。 –

按我的低負荷運行我創建了一個的jsfiddle。如果您還有其他問題，請查看並告訴我們。

DEMO

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

編輯

我做了一些變化，請看看。

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

來源

2012-10-11 08:23:29 Soarabh

對不起，但停靠的頁腳在您的示例中被破壞:( –

請檢查另一個jsfiddle。修復了滾動問題。 – Soarabh

設置您的頁眉和頁腳100％寬度，中心內其中的內容，則居中體。

對於頁腳來說這很容易，因爲它已經設置爲position：relative。在頁腳內部添加另一個div，它將容納寬度爲900px的內容，位置：absolute，left：50％，左邊距爲-450px。

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

Appologies，我會添加一些代碼來說明，但我在我的iPhone上 - 這將需要我幾個小時> _ <當我接觸到真正的鍵盤時，我會編輯澄清。

來源

2012-10-11 08:33:42 Nw167

頁眉和頁腳100％寬度，內容只有900px寬

回答

相關問題