CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例

深藏阁楼爱情的钟 2023-10-02 17:00 23阅读 0赞

原文网址：[CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN]

## 简介 ##

本文用示例介绍CSS三行布局的方案。

三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。

两边固定，中间自适应，一共有如下几种方案：

1.  flex布局（推荐）
2.  网格布局（grid)
3.  vh+calc()
4.  表格布局（table）（不推荐）
5.  绝对定位布局（不推荐）

上下固定，中间自适应，就意味着中间要占满（高度铺满）。所以大部分方案中，其父元素都要设置：height: 100%。

想要达到的效果：

![46c5d97ae0da4656a8bf8cc1df3bbe77.png][]

下边所有的方案的结果都跟上图一样。

## 方案1：flex(推荐) ##

**简介**

flex是css3提供的一种新的布局方式，这种布局的产生就是为了实现自适应布局，它是随着移动互联网时代产生而引进的。本方案是实现自适应布局的最佳方案。

**优点**

1.  简单
2.  维护性好

**缺点**

1.  不兼容旧浏览器

**代码**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                height: 100%;
            }
    
            .container {
                display: flex;
                height: 100%;
                flex-direction: column;
            }
    
            .top {
                height: 100px;
                background-color: #a9ff29;
            }
    
            .middle {
                flex: 1;
                overflow: auto;
                background-color: #ffb91b;
            }
    
            .bottom {
                height: 50px;
                background-color: #40c3ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="top">上</div>
        <div class="middle">中</div>
        <div class="bottom">下</div>
    </div>
    
    </body>
    </html>

## 方案2：网格(grid) ##

**简介**

网格布局是比较新的东西，这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代，bootstrap之类的是对栅格化布局框架非常流行，而网格布局，就是对栅格布局的标准化实现。

**优点**

1.  简单、清晰

**缺点**

1.  不兼容旧浏览器。（因为是新CSS标准的特性）

**代码**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                height: 100%;
            }
    
            .container {
                display: grid;
                height: 100%;
                grid-template-rows: 100px auto 50px;;
            }
    
            .top {
                background-color: #a9ff29;
            }
    
            .middle {
                background-color: #ffb91b;
            }
    
            .bottom {
                background-color: #40c3ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="top">上</div>
        <div class="middle">中</div>
        <div class="bottom">下</div>
    </div>
    
    </body>
    </html>

## 方案3：vh+calc() ##

**简介**

利用css中vh单位和calc() 函数

**优点**

1.  简单
2.  兼容旧浏览器

**缺点**

**代码**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .top {
                height: 100px;
                background-color: #a9ff29;
            }
    
            .middle {
                height: calc(100vh - 150px);
                background-color: #ffb91b;
            }
    
            .bottom {
                height: 50px;
                background-color: #40c3ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="top">上</div>
        <div class="middle">中</div>
        <div class="bottom">下</div>
    </div>
    
    </body>
    </html>

## 方案4：表格(table)(不推荐) ##

**简介**

把三行都看做是表格，控制表格的显示情况即可。

**优点**

1.  简单
2.  兼容旧浏览器（因为表格是兼容旧浏览器的）

**缺点**

1.  不灵活。（边框设置、高度设置等等都有很大受限）

**代码**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body, .container {
                height: 100%;
                width: 100%;
            }
    
            .container {
                display: table;
            }
    
            .container>div{
                display: table-row;
            }
    
            .top {
                height: 100px;
                background-color: #a9ff29;
            }
    
            .middle {
                background-color: #ffb91b;
            }
    
            .bottom {
                height: 50px;
                background-color: #40c3ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="top">上</div>
        <div class="middle">中</div>
        <div class="bottom">下</div>
    </div>
    
    </body>
    </html>

## 方案5：绝对定位(不推荐) ##

**优点**

1.  兼容旧浏览器
2.  简单

**缺点**

1.  脱离文档流，可维护性很差

**示例**

代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                height: 100%;
            }
    
            .container>div {
                position: absolute;
                width: 100%;
            }
    
            .top {
                top: 0;
                height: 100px;
                background-color: #a9ff29;
            }
    
            .middle {
                top: 100px;
                bottom: 50px;
                background-color: #ffb91b;
            }
    
            .bottom {
                bottom: 0;
                height: 50px;
                background-color: #40c3ff;
            }
        </style>
    </head>
    
    <body>
    
    <div class="container">
        <div class="top">上</div>
        <div class="middle">中</div>
        <div class="bottom">下</div>
    </div>
    
    </body>
    </html>

[CSS_--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121592589
[46c5d97ae0da4656a8bf8cc1df3bbe77.png]: https://img-blog.csdnimg.cn/46c5d97ae0da4656a8bf8cc1df3bbe77.png