固定的頁眉和頁腳以及100％的高度含量

Question

我正在嘗試創建一個具有固定頁眉和頁腳的網站，然后在其中一個內容div填充窗口（如高度100％），而無需將頁腳推到折疊以下。

我創建了這個JSFiddle來說明我正在嘗試做的事情： http : //jsfiddle.net/CZFBE/

<body>
<header>
    <nav>Menu</nav>
</header>
<section>
    <div class="hero">Hello World</div>
</section>
<footer>
    Copyright lol
</footer>
</body>

我需要section元素來填充空白屏幕空間。 這是可能嗎？ 我已經嘗試解決這一問題了幾天了，感謝您的幫助或想法！

提前致謝！

Answer 1

我已經在JSFiddle中更新了您的代碼： http : //jsfiddle.net/CZFBE/2/

html {
    height: 100%;
}
body {
    height:100%;
    min-height: 100%;
}
header {
    width:100%;
    top:0px;
    left:0px;
    background: grey;
    height: 4em;
    position:absolute;
}
section {
    height: 100%;
    background: lightgrey;
}
.hero {
    text-align: center;
}
footer {
    width:100%;
    bottom:0px;
    left:0px;
    position:absolute;
    background: grey;
    height: 4em;
}

Answer 2

嘗試類似的方法，它對我有用：

header, footer, section{
    position: absolute;
    width: 100%;
    left: 0;
}
header, footer{
    height: 10%;
}
header{
    top: 0;
}
footer{
    bottom: 0;
}
section{
    height: 80%;
    top: 10%;
    overflow: auto;
}

頁眉和頁腳都占用10％的空間，並且不會移動，部分則占用其余部分並滾動。

Answer 3

看看這個JSFiddle

如果您指定body和html height:100%

您也可以通過將section height:100%

鑒於您需要固定的頁腳+頁眉，這就是我想出的

body,html{
    height: 100%;
    margin: 0 auto;
}
header{
    background: grey;
    height: 4em;
    position: fixed;
    top: 0;
    width: 100%;
}
section{
    background: lightgrey;
    height: 100%;
    margin-top:4em;
}
.hero{
    text-align: center;
}
footer{
    background: grey;
    height: 4em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

固定的頁眉和頁腳以及100％的高度含量

問題描述

3 個解決方案

解決方案1
1 2013-07-23 16:08:43

解決方案2
0 2013-07-23 16:07:07

解決方案3
0 2013-07-23 16:07:35

固定的頁眉和頁腳以及100％的高度含量

問題描述

3 個解決方案

解決方案1 1 2013-07-23 16:08:43

解決方案2 0 2013-07-23 16:07:07

解決方案3 0 2013-07-23 16:07:35

解決方案1
1 2013-07-23 16:08:43

解決方案2
0 2013-07-23 16:07:07

解決方案3
0 2013-07-23 16:07:35