三栏布局，上下固定高度，中间自适应，四种实现方式

最新推荐文章于 2024-01-21 13:37:53 发布

楠丶

最新推荐文章于 2024-01-21 13:37:53 发布

阅读量1.9k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43026567/article/details/102496527

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一种：定位布局

<!-- 定位布局 -->
    <style>
        body html{
            height: 100%;
        }
        .position>div{
            position: absolute;
            width: 100%;
        }
        .top{
            top: 0;
            background: red;
            height: 100px;
        }
        .center{
            top: 100px;
            bottom: 100px;
            background: blue;
        }
        .bottom{
            bottom: 0;
            background: green;
            height: 100px;
        }
    </style>
</head>
<body>
<section class="position">
    <div class="top">上</div>
    <div class="center"></div>
    <div class="bottom">下</div>
</section>
</body>

第二种：flex布局

    <style>
        body html{
            height: 100%;
        }
        .flex{
            display: flex;
            height: 100%;
            flex-direction: column; /*定义排列方向为竖排*/
        }
        .top{
            height: 100px;
            background: red;
        }
        .center{
            flex: 1;
            overflow: auto;
            background: blue;
        }
        .bottom{
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
<section class="flex">
    <div class="top">上</div>
    <div class="center">
        <p>中间自适应</p>
        <p>中间自适应</p>
        <p>中间自适应</p>
        <p>中间自适应</p>
        <p>中间自适应</p>
        <p>中间自适应</p>
    </div>
    <div class="bottom">下</div>
</section>
</body>

第三种：table布局

 <style>
        body html{
            height: 100%;
        }
        .table{
            display: table;
            height: 100%;
            width: 100%;
        }
        .table>div{
            display: table-row;
            vertical-align: middle;
        }
        .top{
            height: 100px;
            width: 100%;
            background: red;
        }
        .center{
            overflow: auto;
            background: blue;
        }
        .bottom{
            height: 100px;
            width: 100%;
            background: green;
        }
    </style>
</head>
<body>
<section class="table">
    <div class="top">上</div>
    <div class="center">中</div>
    <div class="bottom">下</div>
</section>
</body>

第四种:网格(grid)布局

<style>
        .grid{
            display: grid;
            height: 100%;
            grid-template-rows: 100px auto 100px;
        }
        .top{
            background: red;
        }
        .center{
            background: blue;
        }
        .bottom{
            background: green;
        }
    </style>
</head>
<body>
<section class="grid">
    <div class="top">上</div>
    <div class="center">中</div>
    <div class="bottom">下</div>
</section>
</body>

楠丶

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
三栏布局，上下固定高度，中间自适应，四种实现方式

第一种：定位布局 <style> body html{ height: 100%; } .position div{ position: absolute; } .top{ top: 0;...
复制链接

扫一扫