100％身高的全屏頁面

Question

有沒有什麼方法可以製作頁眉，粘腳，頁面和身體應該始終適合屏幕高度的100％ - 頁眉和頁腳，只有HTML和CSS。查看更多圖片。

Answer 1

您可以使用一種方法，使您可以保持身高達到100％，並且使用現代st噁心頁腳的方法：

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

步驟來實現這一目標：

箱尺寸：邊界盒;

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。只是因爲這是一個很好的做法，添加了框尺寸：邊框，但這種方法沒有必要。

Answer 2

添加到您的CSS

html, body { 
    height: 100%; 
    } 

並作出一個div，有你叫體內的含量，然後給它100％的高度。

舉一個例子

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

像這樣：

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

Answer 3

如果您使用的容器在體內的頭之後，那麼你應該設置你的CSS這樣的：

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