html&css圣杯布局

html&css圣杯布局

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

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

html&css圣杯布局_第1张图片
方法

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

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

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

还没解决,还是盖住

  1. 给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置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>

你可能感兴趣的:(前端)