[分享]css3号占用剩余高度

CSS3中的“号占用剩余空间”属性是指在浏览器窗口中剩余可用空间内填充指定的元素。

.box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
}
main {
  flex: 1;
}
footer {
  height: 30px;
} 

在上述代码中，我们使用了“flex”属性来控制剩余空间的填充。首先，我们将所有元素的父元素（.box）的高度设置为100%，这样它将占据整个浏览器窗口的高度。

接下来，我们将header和footer的高度分别设置为50px和30px，这样它们就会在页面的顶部和底部分别占据固定高度的空间。

现在，我们需要确保main元素填充剩余的空间。我们通过将其flex属性设置为1来实现。这个属性告诉浏览器将所有剩余的空间都分配给该元素。

这样，我们就可以确保main元素填充了浏览器窗口可用高度中的所有剩余空间。如果你需要在网页中填充剩余的空间，那么这个属性将非常有用。