HTML5 - 垂直布局：灵活的高度 + 填充其余部分答案

【问题标题】：HTML5 - vertical layout: flexible height + fill the restHTML5 - 垂直布局：灵活的高度 + 填充其余部分
【发布时间】：2017-04-09 18:48:12
【问题描述】：

我在 html、IE9 及更高版本中有一个可怕的高度问题，避免使用 flex-box：

我有一到三行高度的标题（高度依赖）
页面的垂直其余部分应填充一个部分。使用滚动条到该部分，以防它的内容变长。

在简化的stylus 语法中，or as a full codepen：

html, body, header, section
  padding 0
  margin 0  
  font-size 40px
  box-sizing border-box

html
  background #f99
  height 100%

body
  background #9f9
  border 4px solid green
  height 100%

header
  border 4px solid darkred

section
  background #99f
  overflow auto

如果标题高度已知，生活会很轻松。我可以很容易地诉诸“角钉”：

  position absolute
  top 100px
  bottom 0

（或者有一个肥大的顶部填充，并将标题放在上面，等等，等等......）

但遗憾的是：它的高度各不相同。除了vertical flexbox，还有什么建议吗？

— 看起来我需要一个角销，并在 javascript 的帮助下获得关于 top 属性的一些帮助？

【问题讨论】：

标签： jquery css html layout flexbox

【解决方案1】：

由于 IE9 支持视口单元 vh，您可以这样做，无需脚本和额外的包装器。

这样，您将获得一个动态标题和一个填充剩余视口的部分，并在有很多内容时滚动。

Fiddle demo

堆栈sn-p

html, body, .container {
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
.container {
  border: 4px solid green;
}
.wrapper {
  position: relative;
}
header {
  font-size: 40px;
  background: lightgray;
  border: 4px solid darkred; 
}
section {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: calc(100vh - 100% - 8px);  /* the 8px (2 * 4px) is for the container's border */
  background: lightblue;
  font-size: 40px;
  overflow: auto;
}

<div class="container">
  <div class="wrapper">
    <header>
      A fancy header
      <br> line two
    </header>
    <section>
      could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
      <br> could be a lot of text
    </section>
  </div>
</div>

【讨论】：

哇，不知道我可以使用 calc() „已经“... — but seems like it!
-8px，边框厚度的两倍；）
@FrankNocke 当然... :) ...我的错误，已更新

【解决方案2】：

你可以用 JS 来做，或者在我的例子中是 jQuery：

http://codepen.io/anon/pen/ZeVbBR

获取窗口和标题的高度，并将它们的差异作为min-height 应用到该部分。

【讨论】：