Question

一个例子胜过千言万语，所以你走了：

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

正如您所看到的，高度是响应性的，但不是完全的。问题是<div id="k"> height 150px calc()。试着玩它，我想你会明白我的意思。我想摆脱这个问题＆＃39;不知。

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

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

Answer 1

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

如果内容超过100vh，它将会增长

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

div问题的响应高度

1 个答案: