CSS: height- 填充 div 的其余部分？

Question

我想知道这是否可以通过简单的 css 实现，或者我是否必须为此使用 javascript？

我的网站上有一个侧边栏。一个简单的 div#sidbar 它通常高约 1024 像素，但高度会根据其内容动态变化。

让我们想象一下以下情况:

<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 实现吗？

Answer 1

如果您知道 #widget 的确切高度(在您的例子中是 100px)，您可以通过使用绝对定位来避免使用 JavaScript:

#sidebar
{
height: 100%;
width: ...;
position: relative;
}

.widget
{
height: 100px;
}

#rest
{
position: absolute;
left: 0;
width: 100%;
top: 200px;
bottom: 0;
}