Position: Absolute; The Holy Grail layout will be cleverly designed away from the features of standard document flow. First, I need to set the position property of the parent box position: relative; Left {position: absolute; left: 0; top: 0; . } Box on the right

.right { position: absolute; right: 0; top: 0; . }, middle box. Middle {position: relative; margin: 0 200px; . }, the middle box is mainly implemented with gland effects off the standard flow. Remember to clear the default style under CSS Settings, Google Chrome will have the default margin

HTML structure

<div class="header"> <div class="container"> <div class="left"> <h4> Left column </h4> </div> <div class="middle"> < h4 > middle elastic area < / h4 > < / div > < div class = "right" > < h4 > the right bar < / h4 > < / div > < / div > < div class = "footer" > < / div > at the bottom of theCopy the code

The CSS part

     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;
    }
Copy the code

renderingFinally, attach the complete code and give it a thumbs up!! ❥ (^-) ❥ (^-) ❥ (^ _ -)

<! 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, <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 class="container"> <div class="left"> <h4> Left column </h4> </div> <div Class = "middle" > < h4 > middle elastic area < / h4 > < / div > < div class = "right" > < h4 > the right bar < / h4 > < / div > < / div > < div class = "footer" > < / div > at the bottom of the </body> </html>Copy the code