是这样的，我找了个工具站拖了一个 grid 布局，但是它有点奇怪啊

[placeholder]

就是 mainArea 的高度是受 fr 单位控制的，我怎么让他占满剩下的整个浏览器的空间呢？实在是不知道该搜什么了。

codepen:https://codepen.io/cstarx/pen/mdqxYRx

[PinkRabbit]

.container 加上个高度 100vh ?

[frank553000]

height: calc(100vh - 头部高度 - 尾部高度);

[66beta]

html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;

[cyrbuzz]

https://stackoverflow.com/questions/45870323/does-css-grid-have-a-flex-grow-function

fr 和 flex-grow 是类似的，所以只要把 grid 的元素的高度撑满就可以。

[placeholder]

@PinkRabbit
@frank553000
@66beta
@cyrbuzz

学习了学习了，感谢各位