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: "" ;}