CSS 内容区域 100% 高度

Question

我试图将页面的内容区域拉伸(stretch)到 100%。我有一个固定的页眉(50px 高度)和一个粘性页脚(95px 高度)，介于两者之间的任何内容都应该使用 100% 高度...但是我无法让它工作。这是我的 CSS

<div id="wrap">
    <!-- fixed top navigation -->
    <div id="main">
        <!-- main content -->
    </div>
</div>
<footer>
    <!-- footer -->
</footer>   

CSS是这样的

html, body {
height: 100%; /* needed for container min-height */
}

#wrap {min-height: 100%;}

#main {
  position:relative; /* needed for footer positioning*/
  overflow:auto;
  padding-bottom: 95px; /* must be same height as the footer */
  padding-top:50px;
  min-height:100%;
}  

footer {
  position: relative;
  margin-top: -95px; /* negative value of footer height */
  height: 95px;
  background-color:#ebebeb;
}

body {margin:0px;padding:0px;}

有什么办法吗？

Answer 1

如果您将页脚设置为相对(“粘性”)意味着您希望您的网站随着内容向下滚动。

因此您需要创建另一个 div(“ block ”)-> 在 HTML 位置页眉和页脚之间的 div，并给它一个 100% 的宽度和 auto 的高度； (意思是:div 将垂直填充其中放置的内容量。