1. 前言

最近要实现一个页面上的小需求，就是页面头部固定，但是左侧菜单和内容是可以滚动的，也就是基础的后台系统的三栏式，如图所示:

当然，这种页面对于十年代码经验~~常年摸鱼~~的我来说，简直就是just so so，接下来开始分析。

2. 分析&实现

2.1 实现

首先，既然头和内容的布局是跟随浏览器的，所以一整个页面必定采用flex布局。所以，基本页面的架构差不多是这样写的:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }

        .header {
            flex-basis: 50px;
            background-color: burlywood;
            flex-shrink: 0;
        }

        .body {
            flex: 1;
            overflow: auto;
            background-color: brown;
        }

        .left {
            width: 200px;
            height: 100%;
            overflow: auto;
            background-color: blueviolet;
        }

        .right {
            height: 100%;
            flex: 1;
            overflow: auto;
        }

        .main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="header"></header>
        <div class="main">
            <div class="left"></div>
            <div class="right">
            </div>
        </div>
    </div>
</body>

</html>
复制代码