This is the 28th day of my participation in Gwen Challenge

Interviewer: Let me ask you about CSS. How well do you know it?

Me: Still ok

Interviewer: Write me a layout for the Holy Grail

I:… 💥 💥 💥

preface

This is a very common application scenario. The scene requires fixed left and right widths and adaptive middle widths. It’s what we call the Holy Grail layout. As shown in figure:

Flex layout
<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>* {margin: 0;
      padding: 0;
    }
    .header..footer{
        height:40px;
        width:100%;
        background:red;
    }
    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
    }
    .right{
        background: aqua;
        width:300px;
    }
	</style>
</head>
<body>
    <div class="header">Header</div>
    <div class="container">
        <div class="left">On the left</div>
        <div class="middle">The middle section</div>
        <div class="right">On the right</div>
    </div>
    <div class="footer">So here's the bottom</div>
</body>
</html>
Copy the code
All float float: left)
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }

    .footer {
      clear: both;
    }

    .container {
      padding-left: 200px;
      padding-right: 250px;
    }

    .container div {
      position: relative;
      float: left;
    }

    .middle {
      width: 100%;
      background: yellow;
    }

    .left {
      width: 200px;
      background: pink;
      margin-left: -100%;
      left: -200px;
    }

    .right {
      width: 250px;
      background: aqua;
      margin-left: -250px;
      left: 250px; 
    }
  </style>
</head>

<body>
  <div class="header">Header</div>
  <div class="container">
    <div class="middle">The middle section</div>
    <div class="left">On the left</div>
    <div class="right">On the right</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>

Copy the code

This float layout is the most difficult to understand, mainly the negative margin operation after the float.

Before setting the negative margin and left values, it looks like this:

Left box set margin-left: -100%

.left{
  margin-left: -100%;
}
Copy the code

Then move 200px to the left to fill in the empty padding-left portion

.left{
  margin-left: -100%;
  left: -200px;
}
Copy the code

Effect presentation:

Margin-left: -250px; margin-left: -250px; margin-left: -250px; margin-left: -250px

.right{
  / *... * /
  margin-left: -250px;
}
Copy the code

Then move 250px to the right to fill the padding-right part of the parent container:

.right{
  / *... * /
  margin-left: -250px;
  left: 250px;
}
Copy the code

Now the final effect is achieved:

Float (left float: left, right float: right)
<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      overflow: hidden;
    }

    .middle {
      background: yellow;
    }

    .left {
      float: left;
      width: 200px;
      background: pink;
    }

    .right {
      float: right;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">Header</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>

Copy the code
4. Absolute positioning
<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      min-height: 1.2 em;
      position: relative;
    }

    .container>div {
      position: absolute;
    }

    .middle {
      left: 200px;
      right: 250px;
      background: yellow;
    }

    .left {
      left: 0;
      width: 200px;
      background: pink;
    }

    .right {
      right: 0;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">Header</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code