div问题的响应高度

Question

一个例子胜过一千个单词，所以你去吧：

https://jsfiddle.net/jesuxapo/os53cyc1/

如您所见，高度是响应式的，但不是完全响应式的。问题是<div id="k"> 与150px 的固定height。尝试使用它，我想你会明白我的意思。我想以某种方式摆脱这个“问题”。

我可以使用css3 的calc()，但它不是跨浏览器（尤其是android 和IE8-9）。

也许还有其他使用 html 和 css 语言的解决方案？

Answer 1

您可以使用 display:table 属性（IE8 及更高版本）：https://jsfiddle.net/os53cyc1/1/

如果内容加起来超过 100vh，它会增长

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #333;
  font-weight: bold;
  color: #fff;
}
body {
  display:table;
  width:100%;
}
body>div {
  display:table-row;
}
div {
  border: solid 2px #FFFF00;
}
div#a {
  position: relative;
  background: #800000;
  width: 100%;
  height: 100%;
}
div#b {
  position: absolute;
  top: 0;
}
div#c {
  position: absolute;
  bottom: 0;
}
div#k {
  height: 150px;
  background: #008000;
}

<div id="k">
Hello, I'm K and I just broke your code
</div>
<div id="a"><br><br><br><br>
This is relative div with height of 100% and max-height of 500px
<div id="b">
This div is aligned to the top of the Red div
</div>
<div id="c">
This div aligned to bottom of the Red div
</div>
</div>