html - 使 div 的高度成为响应式设计页面的其余部分

Question

在我的响应式设计中，我希望页脚贴在底部，内容填充页面的其余部分。 http://jsfiddle.net/rzjfhggu/1/

在这个例子中，页眉总是 70px 高度，但是内容和页脚是响应式的，所以我不知道它们的高度。我尝试使用 bottom: 0 使页脚绝对化，内容也使用 top 70px 和 bottom 0 绝对化，但在小型设备上，页脚位于内容之上并将其隐藏。

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}
.header {
  height: 70px;
  background: orange;
}
.footer {
  background: lightblue;
}
.content {
  background: yellow;
}

<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

还有什么想法吗？谢谢。

Answer 1

这么多选项，让我们讨论一个:为此，我假设您是决定页脚和页眉元素大小的人，这意味着您知道它们的大小。

对您的 html 稍作更改:

HTML

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.content {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 70px 0 70px 0;
}
.inner_content {
  position: relative;
  height: 100%;
  width: 100%;
}

<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="inner_content">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

您要更改的是内容元素的顶部和底部填充，顶部填充应与页眉高度相同，底部填充应与页脚高度相同。如果大小正确呈现，您现在还可以向 inner_content 添加一些内容，这些内容可以滚动，但永远不会被页眉或页脚遮挡。