如何让用纯CSS来做头部固定,内容区域滑动的页面布局?

网页的头部固定,内容区域有scrollbar的布局比较常见。这个布局的核心是要scrollbar只出现在内容所在的框里,整个页面的高度是和浏览器的高度一样的。

在这个例子里,比较重要的是要固定网页最外层的div的高度。我们用height: 100vh;来确保外层的高度,然后内层就可以依据这个高度来布局了。

.root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: hidden;
}

请注意.main的高度在例子里为了展示的需要,高度设置成了500px,实际的情况下,应该设置成100%。