我想知道这是否可以通过简单的 css 实现，或者我是否必须为此使用 javascript？
我的网站上有一个侧边栏。一个简单的 div#sidbar 它通常大约 1024px 高，但高度会因为它的内容而动态变化。
让我们想象一下下面的例子：
<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#sidebar 的底部。
纯css可以做到吗？
【问题讨论】：
试试
height: 100%;
或
height: auto;
【讨论】：
100% 将超出侧边栏的高度，因为已经有 2 个其他 div。
您想要的是 100% - 200px 之类的东西，但 CSS 不支持此类表达式。 IE 有一个非标准的“表达式”功能，但是如果你想让你的页面在所有浏览器上工作，我看不到没有 JavaScript 的方法。或者，您可以让所有 divs 使用百分比高度，这样您就可以有 10%-10%-80% 之类的值。
更新：这是一个使用 JavaScript 的简单解决方案。每当侧边栏中的内容发生变化时，只需调用此函数即可：
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';
};
【讨论】：
100% - 200px 可以使用 calc CSS 值。
height: 100%; margin-bottom: 200px; 这样做吗？
如果您知道#widget 的确切高度（在您的情况下为 100px），则可以通过使用绝对定位来避免使用 JavaScript：
#sidebar
{
height: 100%;
width: ...;
position: relative;
}
.widget
{
height: 100px;
}
#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}
【讨论】：
您可以使用嵌套的 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>
【讨论】：
我在寻找类似问题的答案时遇到了这个问题，我想我会说明calc。在这篇文章中，calc 还不支持跨浏览器；但是，您可以检查this link here 以查看您的目标浏览器是否受支持。我修改了 matt 的假设案例以在 an example on jsFiddle 中使用 calc。从本质上讲，它是一个纯 CSS 解决方案，可以满足 casablanca 在他的回答中提出的建议。例如，如果浏览器支持calc，那么height: calc(100% - 200px); 和类似属性一样有效。
【讨论】：
我建议使用 table-element 作为替代：
【讨论】：
有时解决方法可能是：
#rest {
height: 100%;
padding-bottom: 200px;
}
div 本身会太高，但由于有内边距，它的内容会有合适的高度。
【讨论】：