页脚隐藏在简单的1列夹层CSS布局中的内容

Question

我试图让一种看似简单的机制仅与CSS一起使用，而我一直碰壁。

总体布局是我有一个带有页眉和页脚的单列布局。 我希望页眉和页脚保持“固定”在视口的顶部和底部，并且如果内容太多，我希望中间部分进行调整以用垂直滚动条填充其余空间。

我觉得我已经很接近了，但是问题是中央div延伸到页脚后面页面的底部。 我猜问题是我将中央div的高度指定为100％...我想它归结为不知道如何减去固定的页脚高度并保持中央div响应。 可以使用纯CSS技巧完成此操作，还是需要使用javascript查询屏幕尺寸并计算偏移量？

我试过在中央div的底部添加填充和边距。 它没有用，即使有，最多所有内容都可见，但滚动条仍会滑到页脚后面。 哪个不是那么干净。 任何帮助，将不胜感激。 谢谢！

HTML：

  <div class="container">
      <div class="header">Header</div>
      <div class="content">
         <h2>Layout</h2>
         LOTS of text
      </div>
      <div class="footer">
         <p>Footer</p>
      </div>
  </div>

CSS：

html,
body { height: 100%; 
overflow:hidden;}

.container {
    width: 70%;
    background-color: #FFF;
    height: 100%;
    position:relative;
    overflow:hidden;    
}

.header {
    background-color: #6F7D94;
    height: 60px;
}

.content {
    position:relative;
    padding: 10px 10px;
    overflow-y:scroll;
    overflow-x: hidden;
    height:100%;
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    padding: 0;
    background-color: #6F7D94;
}

这是我的小提琴

Answer 1

您可以使用position:absolute; 在您的.content也是如此：

小提琴

.content {
    position:absolute;
    top:60px; /* height of header */
    left:0;
    bottom:60px; /* height of footer */
    padding: 10px 10px;
    overflow-y:scroll;
    overflow-x: hidden;
}