html&css圣杯布局

最新推荐文章于 2023-08-01 18:50:37 发布

RDSunday

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量218

点赞数 1

分类专栏：前端文章标签：布局 html css 定位 html5

本文链接：https://blog.csdn.net/weixin_43755104/article/details/105273903

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

html&css圣杯布局

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。

左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响看图

在这里插入图片描述
方法

父元素的的三栏务必先写中间盒子，因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。
让左边盒子上去，设置其左边距为负的中间盒子的宽度.left {margin-left:-100%;}
让右边盒子上去，设置其左边距为负的自己的宽度.right {margin-left：-200px;}

这时会出现问题。中间盒子的内容会被左边盒子盖住

利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。代码如下：.container{ padding: 0 200px;}

还没解决，还是盖住

给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。

.left{ position: relative; left: -200px;}
.right{position: relative;right: -200px;

完整demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
        }
        
        .container {
            height: 200px;
            overflow: hidden;
            padding: 0 200px;
            border: 1px solid;
        }
        
        .middle {
            width: 100%;
            height: 200px;
            background-color: deeppink;
            float: left;
            color: black;
        }
        
        .left {
            width: 200px;
            height: 200px;
            margin-left: -100%;
            background-color: blue;
            float: left;
            position: relative;
            left: -200px;
        }
        
        .right {
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            margin-left: -200px;
            float: left;
            position: relative;
            right: -200px;
        }
        
        footer {
            width: 100%;
            height: 30px;
            background-color: darkslategray;
        }
    </style>
</head>

<body>
    <header>
        <h4>Header内容</h4>
    </header>
    <div class="container">
        <div class="middle">中间弹性区我是内容我是内容我是内容我是内容</div>
        <div class="left">
            <h4>左边栏</h4>
        </div>
        <div class="right">
            <h4>右边栏</h4>
        </div>
    </div>
    <footer>
        <h4>Footer内容</h4>
    </footer>
</body>

</html>

RDSunday

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html&css圣杯布局

html&css圣杯布局圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响看图方法父元素的的三栏务必先写中间盒子，因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。...
复制链接

扫一扫