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

最新推荐文章于 2024-01-17 15:04:35 发布

小菜鸡就是我

最新推荐文章于 2024-01-17 15:04:35 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_42863256/article/details/109046718

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用CSS的flex布局和position绝对定位来创建横向和纵向三段式的页面布局。通过设置顶部和底部为固定高度，中间部分实现自适应填充剩余空间，同时展示了左右两侧固定宽度，中间内容自适应的横向布局技巧。

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

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

横向三段式主要采用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>`