固定頁眉和頁腳與動態內容（照片庫站點）

我有一個問題，這是困擾着我這些天。我必須做一個佈局： a .header和.content像固定高度（例如100px）和100％寬度。然後，我必須把內容與動態高度，覆蓋空隙空間。固定頁眉和頁腳與動態內容（照片庫站點）

[...] 
<style type="text/css"> 
    body {margin:0;padding:0;} 
    .wrapper {height:100%;width:100%;position:absolute;} 
    .header {position:absolute;top:0;height:100px;width:100%;background:#0F0;} 
    .footer {position:absolute;bottom:0;height:100px;width:100%;background:#0F0;} 
    .content {position:absolute;height:100%;width:100%;background:#F00;padding:100px 0;margin:-100px 0;} 

</style> 
</head> 

<body> 
<div class="wrapper"> 
    <div class="header"> 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    </div> 
</div> 

</body> 
</html>

這種佈局民政事務總署允許我把一個標頭和固定高度頁腳，並與該級尺寸（一div.content內）圖像

來源

2011-11-04 Lorenzo Pimps

嗨洛倫佐，你有什麼問題？你能否嘗試多解釋一下。 – hairynuggets

所以你想讓'.content'填充'.header'和'.footer'之間的空格？ – jackJoe

你想要一個帶有滾動固定頁眉和頁腳和可滾動內容的HTML頁面嗎？ – buschtoens

首先的內容：如果你有一個獨特的元素，如頁眉/頁腳，請使用id而不是class。 A class用於頻繁出現或具有共同特徵的元素，使其在語義上正確分組，如描述文本。

現在你的問題。我們必須給html和body總高度爲100％，以便它們不會調整大小，我們可以確定我們將使用整個頁面。

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

然後，您使用了一個包裝，但我們可以省略。 <body>已經是一個包裝。 header和footer解釋他們的自我。

#header { 
    height: 100px; 

    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 

    background: #0F0; 
} 
#footer { 
    height: 100px; 

    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    background: #0F0; 
}

content有點棘手。它需要擴展到100% - 100px at the top - 100px at the bottom。不可能？

#content { 
    position: absolute; 

    top: 100px; 
    bottom: 100px; 
    left: 0; 
    right: 0; 

    overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */ 

    background: #F00; 
}

完成。你可以在jsFiddle上看看它。

來源

2011-11-04 16:45:34 buschtoens

另一種選擇是使用寬度：100％，而不是左和右。你保存一行。 – Nashenas

@Nashenas正確。雖然我更願意堅持定位，一旦我開始使用它。我想，老習慣很難死。：d – buschtoens

固定頁眉和頁腳與動態內容（照片庫站點）

回答

相關問題