Question

我遇到了一个问题：我基本上有四个div：

<div id="a">Variable Height: 45px or 90px</div>
<div id="b">fixed height: 50px</div>
<div id="c">Has to fill up remaining</div>
<div id="d">Variable Height: 85px or 40px</div>

另外：#c可能不在#d之下。它必须填满，直到#d'的顶部。可以使用填充，#c的内部可能不会低于/低于/超过#d。

这是CSS：

* { margin:0px; padding:0px; }
body, html { height:100%; }
#a { min-height: 45px; width:100%; background: red; max-height:90px;  }
#b { height: 50px; width: 100%; background: orange; float:left;}
#c {/*Here how to fill up remaining*/ }
#d { min-height: 40px; max-height: 85px; background: green; float:left; position:absolute; bottom:0px; }

不幸的是，我不能使用javascript，所以我希望CSS有一些可能性！

修改

我尝试了-webkit-calc，但这不起作用，因为该值必须是静态的。

使用Safari 7.0.2 干杯，的Douwe

修改用表格修复问题..需要比我想象的更开箱即用！无论如何，谢谢！

Answer 1

将c的高度设置为自动或100％适用于Chrome。什么不适合你？

DEMO如果更改两个变量高度div的内容，则c的高度会正确更改。

CSS：

* { margin:0px; padding:0px; }
body, html { height:100%; }
#a { min-height: 45px; width:100%; background: red; max-height:90px; overflow:hidden;  }
#b { height: 50px; width: 100%; background: orange; float:left;}
#c { height: 100%;}
#d { min-height: 40px; max-height: 85px; background: green; float:left; position:absolute; bottom:0px; width: 100%; }

100％高度减去可变高度

1 个答案: