CSS典型全屏后台布局

CSS典型全屏后台布局，左侧固定右侧可滑动
(1)是典型的左侧菜单固定，右侧高度可变动的布局
(2)运用到flex布局，以及css中calc函数计算宽度
(3)right-in里的高度可以写成auto来自适应页面的高度

   <div class="parent" id="parent" style="background-color: lightgrey;">
        <div class="top" style="background-color: lightblue;">
            <span>top</span>
        </div>
        <div class="middle" style="background-color: pink;">
            <div class="middle-container">
                <div class="left" style="background-color: orange;">
                    <span>left</span>
                </div>
                <div class="right" style="background-color: lightsalmon;">
                    <div class="right-in">
                        <span>right</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        body,
        span {
            margin: 0;
            font-size: 24px;
        }
        
        body,
        html,
        .parent {
            height: 100%;
        }
        
        .middle {
            height: calc(100% - 100px);  //css中calc函数计算宽度
        }
        
        .middle-container {
            display: flex;
            flex-direction: row;
            height: 100%;
        }
        
        .left {
            width: 100px;
            height: 100%;
        }
        
        .right {
            width: calc(100% - 100px);
            height: 100%;      //高度100%意为占满竖直的一整屏幕
            overflow: auto;   //在竖直方向满屏则滚动
        }
        
        .right-in {
            height: auto;  //right-in里的高度可以写成auto来自适应页面的高度
        }
        
        .top {
            height: 100px;
        }
    </style>

图示为系统界面
右侧宽度为计算宽度，实际为自适应的100%-100px
实现了右侧内容上下滚动时，左侧菜单固定不动