全屏頁面，身高100％

Question

有什么方法可以使頁面的頁眉，頁腳和頁面主體始終適合屏幕高度的100％-頁眉和頁腳，僅包含HTML和CSS。 有關更多信息，請參見圖片。

Answer 1

您可以使用一種方法，使您的身體保持在100％的高度，並使用現代的粘性頁腳方法使頁腳具有粘性：

http://mystrd.at/modern-clean-css-sticky-footer/

實現此步驟：

1. box-sizing：border-box;

2. html {position：relative; 高度：100％；}

3. body {text-align：center; 最低高度：100％； 邊距：0; 溢出：隱藏；}

4.容器：絕對位於頂部標頭高度的位置。

5.頁腳：絕對位置，左側和底部：0；


看這個演示：

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { position: relative; height: 100%; } body { text-align:center; min-height: 100%; margin:0; overflow:hidden; } footer { position: absolute; left: 0; bottom: 0; height: 50px; /* Height of Footer */ width: 100%; } header { height: 50px; /* Height of header */ line-height:50px; /* vertical align the title*/ width: 100%; background-color:lightgreen; } .container{ background-color: darkgreen; height: 100%; position: absolute; top: 50px; /* Height of header */ left: 0; bottom: 0; width: 100%; right: 0; } footer{ background-color:yellow; line-height:50px; /* vertical align the title*/ } 

 <header>HEADER</header> <div class="container"></div> <footer>FOOTER</footer> 

檢查您會發現主體始終處於100％的高度，並且頁腳在底部處於粘性狀態。

PS。 添加了box-sizing：border-box只是因為這是一個好習慣，但這種方法不是必需的。

Answer 2

如果要在標題后的正文中使用容器，則應這樣設置CSS：

 .container {width: 100%; height: 100%; content: "" ;} 

Answer 3

將此添加到您的CSS

html, body {
    height: 100%;
    }

並創建一個具有您稱為body的內容的div，然后將其高度設置為100％。

舉個例子

<header>..</header>
<section id="content"> <--- HAS 100% IN HEIGHT.
     ....content
</section>
<footer>..</footer>

像這樣：

#content {
    width: 960px; <-- definable.
    height: 100%;
}