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

2021-09-18大约2分钟

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

<html>
    <head>
        <style>
            body {
                box-sizing: border-box;
                margin: 0;
            }
            .root {
                height: 100vh;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                overflow-y: hidden;
            }
            .banner {
                border: 1px solid aliceblue;
                padding: 5px 10px;
                box-sizing: border-box;
            }
            .head {
                border: 1px solid aquamarine;
                padding: 20px 10px;
                box-sizing: border-box;
            }
            .main {
                box-sizing: border-box;
                display: flex;
                width: 100%;
                height: 500px;// 100%;
                flex-direction: row;
                border: 1px solid darkblue;
                overflow: auto;
            }
            .nav {
                box-sizing: border-box;
                border: 1px solid crimson;
                padding: 10px;
            }
            .content {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                overflow: auto;
                border: 1px solid royalblue;
                padding: 5px 10px;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div class="root">
            <div class="banner">通知</div>
            <div class="head">header</div>
            <div class="main">
                <div class="nav">
                    Nav
                </div>
                <div class="content">
                    <div class="very-long-content">
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                        <p>content</p>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>

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

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

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

HTML CSS