我正在構建1列響應性博客網站。我有一個固定的位置標題與導航，內容部分與x數量的博客文章（作爲摘錄）和頁腳包含聯繫表格。100％身高相對定位頁腳

<div id="header">Navigation & Branding</div> 
<div id="content">Blog Content</div> 
<div id="footer">Contact Form</div>

除了頁腳的高度，一切都按需要工作。我想讓頁腳高度與瀏覽器窗口的高度相匹配，這樣（除了固定頁眉）滾動到頁面底部時，只有頁腳可見並且完全填充瀏覽器窗口。

如何用css實現此目的？

來源

2013-09-24 renderghost

您可以通過將#footer設置爲position：absolute;然後將寬度&高度設置爲100％。

來源

2013-09-24 15:54:13 Jessica

只要您的頁腳div是身體的直接後代，並且身體的邊距和填充設置爲0，則應將腳註的高度設置爲100％。這個例子說明了：

<html> 
    <head><title>title</title><head> 
    <body style="margin:0; padding:0;"> 
     <div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div> 
     <div id="content" style="height: 500px; background-color: red;">Blog Content</div> 
     <div id="footer" style="height:100%; background-color: yellow;">Contact Form</div> 
    </body> 
</html>

來源

2013-09-24 15:55:58 yelly

你想這樣的一些東西？

HTML：

<div id="mainbody"> 
    <div id="header">Navigation & Branding</div> 
    <div id="content">Blog Content</div> 
    <div id="footer">Contact Form</div> 
</div>

CSS：

html, body{ 
    width:100%; 
    height:100%; 
} 
#header{ 
    position:fixed; 
    top:0; 
    height:50px; 
    width:100%; 
    background:red; 
    color:white; 
} 
#mainbody{ 
    padding-top:50px; 
    background:blue; 
    color:white; 
    width:100%; 
} 

#footer{ 
    background:green; 
    position:absolute; 
    height:100%; 
    width:100%; 
    color:white; 
}

DEMO

來源

2013-09-24 16:02:27

100％身高相對定位頁腳

回答

DEMO

相關問題