CSS典型全屏后台布局

PA_Orange

已于 2022-02-23 17:24:09 修改

阅读量1k

点赞数

分类专栏：后台布局专题文章标签： html flex css

于 2020-10-16 15:37:58 首次发布

本文链接：https://blog.csdn.net/qq_46012527/article/details/109117242

版权

后台布局专题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用CSS的flex布局和calc函数创建一个典型的后台界面布局，其中左侧菜单固定，右侧内容区域可根据页面高度自动调整并支持滚动。通过设置中间容器的高度和右侧栏的宽度，实现了全屏且适应性的布局效果。

摘要由CSDN通过智能技术生成

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>