html - 将部分划分为固定高度的部分和使用 flexbox 的可变部分

Question

我想用 flexbox 垂直划分内容部分（我不包括页眉和页脚）（或者有没有更好的方法来使用网格？）。顶部必须有固定的高度，底部必须填满剩余区域。

标签： htmlcssflexboxcss-grid

Answer 1

为了让底部填充剩余区域，您可以使用该calc()功能。

由于您的顶部具有固定的高度，我们可以像这样设置底部：

.top-section {
  // Change the X
  height: X; 
}

.bottom-section {
  // X is the height of the top section
  height: calc(100% - X); 
}