div问题的响应高度

Question

一个示例胜过一千个单词，因此，您可以执行以下操作：

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

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

我可以使用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>