纯CSS实现横纵向三段式布局

最新推荐文章于 2023-04-14 10:20:26 发布

小菜鸡就是我

最新推荐文章于 2023-04-14 10:20:26 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_42863256/article/details/109046718

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要是实现首尾固定中间自适应以及左右固定中间自适应的布局。

横向三段式主要采用flex，纵向三段式采用position：absolute布局。

最终实现效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<style type="text/css">
    body,html{
        height:100%;
        margin:0;
    }
    .page{
        height: 100%;
        margin:0;
    }


    .top{
        position: absolute;
        height: 50px;
        top:0;
        left: 0;
        background-color: red;
        width:100%;
    }
    .main{
        /*实现纵向自适应*/
        width:100%;
        position: absolute;
        margin-top:50px;
        height: calc(100% - 100px);

        /*实现横向自适应*/
        display: flex;
    }
    .center{
        flex:1;
        background: yellow
    }
    
    .left{
        width:250px;
        background: green;
    }
    .right{
        width: 250px;
        background: green;
    }


    .bottom{
        position: absolute;
        height: 50px;
        bottom:0;
        left: 0;
        background-color: red;
        width:100%;
    }
</style>
<head>
    <title></title>
</head>
<body>
    <div class='page'>
        <div class='top'>1</div>
        <div class='main'>
            <div class='left'>left</div>
            <div class='center'>center</div>
            <div class='right'>right</div>
        </div>
        <div class='bottom'></div>
    </div>
</body>
</html>`

小菜鸡就是我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现横纵向三段式布局

主要是实现首尾固定中间自适应以及左右固定中间自适应的布局。横向三段式主要采用flex，纵向三段式采用position：absolute布局。最终实现效果<!DOCTYPE html><html><style type="text/css"> body,html{ height:100%; margin:0; } .page{ height: 100%; margi
复制链接

扫一扫