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

Question

我在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对顶级属性有一点帮助？

Answer 1

由于IE9支持视口单元int array[9] = { 0, 64, 32, 16, 8, 4, 2, 1}; #define MASK(col) (array[col]) (((0) & 7) = 0, ((1) & 7) = 64, ((2) & 7) = 32, ((3) & 16)...) ，你可以这样做，没有脚本，还有一个额外的包装器。

使用此方法，您将获得一个动态标题和一个填充剩余视口的部分，并在内容很多时滚动。

Fiddle demo

Stack snippet

"#10010 errors encountered during linking "life.out" not built"
"#10056 "array" redefined: first defined in './lifelib.obj', redefined in 
'./life.obj'"

vh

Answer 2

您可以使用JS或我的示例jQuery：

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

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