css中的圣杯布局

最新推荐文章于 2024-03-01 14:45:20 发布

卡夫卡的baby

最新推荐文章于 2024-03-01 14:45:20 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125612959

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

圣杯布局：

圣杯布局的实现方式有4种，分别是通过float浮动实现、通过position定位实现、通过flex弹性布局实现、通过grid网格布局实现。

圣杯布局就是左右两边大小固定不变，中间宽度自适应。

例：

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

代码如下：

<title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 120px;
            background-color: #5B5A5A;
        }
        .container{
            /* 溢出隐藏 */
            overflow: hidden;
             /*  外层的container设置 padding-left: 400px;padding-right: 140px;，
                目的是：
                给left和right ，给这两个盒子，腾出显示的位置（或者说空出位置）。
            */
            padding-left: 500px;
            padding-right: 150px;
            outline: 1px dashed pink;
        }
        .container .left, .container .center, .container .right{
            /* 都三个盒子 都设置 高度是900像素 */
            height: 900px;
            /* 都三个盒子 都设置 左浮动 */
            /* 浮动 */
            float: left;
        }
        .container .left{
            width: 500px;
            background-color: chartreuse;
            /* 向左移动了400px */
            margin-left: -500px;
        }
        .container .center{
            width: 100%;
            background-color: coral;
        }
        .container .right{
            width: 150px;
            background-color: orangered;
            margin-right: -150px;
        }
        .footer{
            width: 100%;
            height: 150px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
   
    <!-- .hearder+.container+.footer -->
    <div class="header">
   
    </div>
    <div class="container">
        <!-- 圣杯布局就是左右两边大小固定不变，中间宽度自适应。 -->
        <!-- .left+.center+.right -->
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

预览效果：