使用postion：absolute定位属性解决圣杯布局问题灵活运用position：absolute;会脱离标准文档流

灵活运用position：absolute;会脱离标准文档流的特点，巧妙设计圣杯布局。首先需要再父盒子设置一下定位属性position：relative;,然后左边盒子.left设置.left{position: absolute; left: 0; top: 0;...} 右边盒子

.right { position: absolute; right: 0; top: 0; ... }，中间盒子 .middle { position: relative;margin: 0 200px;...},中间盒子主要是用脱离标准流的压盖效果实现。记得CSS设置下清除默认样式，谷歌浏览器会有默认的margin

HTML结构

    <div class="header">
        头部
    </div>
    <div class="container">
        <div class="left">
            <h4>左边栏</h4>
        </div>
        <div class="middle">
            <h4>中间弹性区</h4>
        </div>
        <div class="right">
            <h4>右边栏</h4>
        </div>
    </div>
    <div class="footer">
        底部
    </div>

CSS部分

     body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
    }

    .header {
        width: 100%;
        height: 40px;
        background-color: darkseagreen;
        text-align: center;
    }

    .container {
        height: 200px;
        overflow: hidden;
        position: relative;
    }


    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        text-align: center;
    }

    .middle {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: #fff;
        margin: 0 200px;
        
    }

    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        text-align: center;
    }

    .footer {
        width: 100%;
        height: 30px;
        background-color: darkslategray;
        text-align: center;
    }

效果图最后附上完整代码，来了点个赞吧！！！❥(^-)❥(^-)❥(^_-)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
    <title>Document</title>
</head>
<style>
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
    }

    .header {
        width: 100%;
        height: 40px;
        background-color: darkseagreen;
        text-align: center;
    }

    .container {
        height: 200px;
        overflow: hidden;
        position: relative;
    }


    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        text-align: center;
    }

    .middle {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: #fff;
        margin: 0 200px;
        
    }

    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        text-align: center;
    }

    .footer {
        width: 100%;
        height: 30px;
        background-color: darkslategray;
        text-align: center;
    }
</style>

<body>
    <div class="header">
        头部
    </div>
    <div class="container">
        <div class="left">
            <h4>左边栏</h4>
        </div>
        <div class="middle">
            <h4>中间弹性区</h4>
        </div>
        <div class="right">
            <h4>右边栏</h4>
        </div>
    </div>
    <div class="footer">
        底部
    </div>


</body>

</html>