页面布局之上下固定中间自适应

最新推荐文章于 2024-08-24 21:17:20 发布

喝牛奶的鱼1022

最新推荐文章于 2024-08-24 21:17:20 发布

阅读量7.4k

点赞数 7

分类专栏： css 前端

本文链接：https://blog.csdn.net/betty13006159467/article/details/82216629

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。
实现这种布局我主要通过两种方法：

使用绝对定位

对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位实现</title>
    <style type="text/css">
        html,body,div{
            padding:0;
            margin:0;
        }
        .header{
            position:absolute;
            top:0; /*头部绝对定位位置*/
            height:100px;
            width:100%;
            background: red;
        }
        .footer{
            position:absolute;
            bottom:0;/*尾部绝对定位位置*/
            height:100px;
            width:100%;
            background:yellow;
        }
        .main{
            position:absolute;
            width:100%;
            top:100px; /*中间自适应部分绝对定位位置，top是头部的高度*/
            bottom:100px; /*bottom是尾部的高度*/
            background: #ccc;
            overflow:auto; /*超出的部分，滚动条显示*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">我是头部</div>
        <div class="main">
            我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
            我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
            我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
            我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>
        </div>
        <div class="footer">我是尾部</div>
    </div>
</body>
</html>

这里写图片描述

使用flex布局

还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局实现</title>
    <style type="text/css">
        html,body{
            padding:0;
            margin:0;
            height:100%; /*定义页面整体高度为100%，重要*/
        }
        .container{
            display:flex; /*父元素的定义为flex布局*/
            height:100%; /*这里也要定义，重要*/
            width:100%;
            flex-direction: column; /*定义排列方向为竖排*/
        }
        .header{
            height:100px; /*头部固定高度*/
            background: red;
        }
        .footer{
            height:100px; /*尾部固定高度*/
            background: yellow;
        }
        .main{
            background: #ccc;
            flex:1; /*中间分配剩下的所有空间*/
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">我是头部</div>
        <div class="main">
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
            我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>
        </div>
        <div class="footer">我是尾部</div>
    </div>
</body>
</html>