全屏页面，100％的身高

Question

有没有办法制作一个带有标题，粘性页脚的页面，并且正文应始终适合屏幕高度的100％ - 页眉和页脚，只有HTML和CSS。请参阅图片了解更多信息。

Answer 1

您可以使用一种方法，使您可以使用现代粘性页脚方法将身体保持在100％高度并使用粘性页脚：

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

实现这一目标的步骤：

1。大小调整：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％高度，并且页脚底部会发粘。

聚苯乙烯。添加了box-sizing：border-box只是因为这是一个很好的做法，但这种方法并不是必需的。

Answer 2

如果您在标题后使用了正文中的容器，那么您应该像这样设置您的CSS：

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

Answer 3

将此添加到您的css

html, body {
    height: 100%;
    }

然后制作一个div，它具有你称之为body的内容，然后给它100％的高度。

例如

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

像这样：

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