CSS：高度填充其余的div？
我不知道这是可能的简单的CSS或如果我必须使用JavaScript的呢？
我在我的网站上有一个侧边栏。 一个简单的div＃sidbar它通常约1024px高，但由于它的内容高度dynamic变化。
所以让我们想象下面的情况：
<div id="sidebar"> <div class="widget"></div> //has a height of 100px <div class="widget"></div> //has a height of 100px <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar </div> 我希望div＃rest填写其余的边栏，直到它到达div＃边栏的底部。
这是纯粹的CSS可能吗？
你想要的是像100% - 200px但CSS不支持这些expression式。 IE有一个非标准的“expression式”function，但是如果你希望你的页面在所有的浏览器上都能正常工作的话，我看不到没有JavaScript的方法。 或者，你可以使所有的div使用百分比高度，所以你可以有像10％-10％-80％的东西。
更新：这是一个使用JavaScript的简单解决scheme。 只要侧栏中的内容发生变化，就调用这个函数：
function resize() { // 200 is the total height of the other 2 divs var height = document.getElementById('sidebar').offsetHeight - 200; document.getElementById('rest').style.height = height + 'px'; };
如果你知道#widget的确切高度（在你的情况下是100px），你可以避免使用绝对定位的JavaScript：
#sidebar { height: 100%; width: ...; position: relative; } .widget { height: 100px; } #rest { position: absolute; left: 0; width: 100%; top: 200px; bottom: 0; }
我遇到这个问题，同时寻找类似问题的答案，我想我会说明calc 。 截至本文， calc还不支持跨浏览器; 不过，你可以在这里查看这个链接 ，看看你的目标浏览器是否受支持。 我已经修改了马特的假设情况下在jsFiddle的例子中使用calc 。 从本质上说，它是一个纯粹的CSS解决scheme，它做卡萨布兰卡在他的答案中提出的。 例如，如果浏览器支持calc ，那么height: calc(100% - 200px); 将是有效的以及相似的属性。
我build议使用表格元素作为替代：
- +：干净的CSS
- +：避免使用javascript
- – ：表语义上被滥用
- – ：不是请求的div元素
你可以用嵌套的div标签来做到这一点。 你有一个指定左侧的宽度，然后另一个留空白。 为了填补对方的其余部分，您在右侧div中嵌套了100％的相对div。 像这样：
<div style="width:100%"> <div style="width:300px;background-color:#FFFF00;float:left"> </div> <div style="margin-left:300px"> <div style="position:relative;left:0px;width:100%;background-color:#00FFFF"> </div> </div> </div>
尝试
height: 100%;
要么
height: auto;
