全屏布局与Flex实现-优快云博客

本文探讨了全屏布局的设计特点，包括保持窗口充满和局部滚动条控制。针对顶栏和底栏定高、主内容区自适应的需求，提出了使用Position和Flex两种实现方案。当需求改变，需要区域自适应时，Flex的灵活性得以体现，能够轻松解决position无法解决的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要特点

保持充满整个窗口
滚动条往往控制局部区域

需求

顶栏和低栏是定高的，整体的宽度是自适应的，中间的主内容去，侧边栏定宽，内容区自适应。

实现方案一：Position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏布局position</title>
    <style type="text/css">
        html,body,.parent{height: 100%;overflow: hidden;}
        div{border: 1px solid black;}
        .top{position: absolute;top: 0;right: 0;left: 0;height: 100px;}
        .left{position:absolute;top:100px;bottom: 50px;left:0;width: 200px;}
        .right{position: absolute;left: 200px;top: 100px;bottom: 50px;right: 0;overflow: auto;}
        .inner{height: 1000px}
        .bottom{position: absolute;bottom: 0;height: 50px;left: 0;right:0;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">
            <div class="inner"></div>
        </div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>

解决方案二：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏布局flex</title>
    <style type="text/css">
        html,body,.parent{height: 100%;overflow: hidden;}
        div{border:1px solid black;}
        .parent{display: flex;flex-direction: column;}
        .top{height:100px;}
        .bottom{height: 50px;}
        .middle{flex:1;display: flex;}
        .left{width: 200px;}
        .right{flex: 1;overflow: auto;}
        .inner{height: 1000px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="top"></div>
        <div class="middle">
            <div class="left"></div>
            <div class="right">
                <div class="inner"></div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</body>
</html>

需求改变

让之前定宽，定高的区域变为自适应的，由内容所决定

实现方案flex

显然的，position是没法解决的，而由于flex的优良特性，我们只需要将之前的属性去掉即可

html,body,.parent{height: 100%;overflow: hidden;}
div{border:1px solid black;}
.parent{display: flex;flex-direction: column;}
.middle{flex:1;display: flex;}
.right{flex: 1;overflow: auto;}
.inner{height: 1000px;}