This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

This is the thirty-seventh article in the “Learn front End from Scratch” series – forty-two Front-end Layout Solutions

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

This article summarizes 42 common CSS layouts, which can be broken down into the following categories:

  • Horizontal center

  • Vertical center

  • Horizontal and vertical center

  • Two columns of the layout

  • Three column layout

  • Uniform layout

  • Sticky Footer layout

  • Full screen layout

These are the contents of this article.

Horizontal center

Horizontal layout is simple and there are many ways to achieve it. Here are seven common layout methods, and their common CSS code is as follows:

.parent { background: #ff8787; }
.child { height: 300px; width: 300px; background: #e599f7; }

Copy the code

The HTML structure is also fixed, with a parent that inherits the width of and a child that is fixed at 300px by 300px as follows:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

The final result is as follows:

The rose-colored block in the image above is the parent, which increases with the page width; Mauve is the child, middle relative to the parent.

1. Use the text-align attribute

If the element is an inline block-level element, that is, an element of display: inline-block, you can center it horizontally by setting text-align: center to its parent element. The CSS code is as follows:

.parent {
  /* For child display: inline-block; Text-align: center; Achieve horizontal center */
  text-align: center;
}

.child {
  display: inline-block;
}
Copy the code

2. Horizontally centered block-level elements of fixed width (Method 1)

Margin: 0 auto; margin: 0 auto; , but it is worth noting that the width must be set.

The CSS code is as follows:

.child {
  /* Direct margin:0 auto; Can achieve horizontal center */
  margin: 0 auto;
}
Copy the code

3. Horizontally centered block-level elements of fixed width (Method 2)

For elements that enable positioning, you can use the left attribute and margin.

The CSS code is as follows:

.child {
  /* Enable positioning */
  position: relative;
  left: 50%;
  /* margin-left is half of the negative width */
  margin-left: -150px;
}
Copy the code

4. Horizontally centered block-level elements of fixed width (Method 3)

When an element is positioned or fixed, the left and right attributes are set together to stretch the element’s width, and the horizontal center is achieved by combining the width and margin attributes.

The CSS code is as follows:

.parent {
  position: relative;
  height: 300px;
}

.child {
  /* Enable the location of the parent phase of the child is not */
  position: absolute;
  /* Horizontally fill the screen */
  left: 0;
  right: 0;
  width: 300px;
  /* Set the width after the screen is full, and finally achieve horizontal center through margin */
  margin: auto;
}
Copy the code

5. Horizontally centered block-level elements of fixed width (Method 4)

The left and transform attributes are horizontally centered when the element is positioned or positioned.

The CSS code is as follows:

.parent {
  position: relative;
}

.child {
  /* Enable positioning */
  position: absolute;
  /* This method is similar to the left-margin method, but it does not need to calculate the width manually. * /
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

6. The Flex project

There are many ways to achieve this centered layout with Flex.

The CSS code is as follows:

.parent {
  height: 300px;
  /* Enable Flex layout */
  display: flex;
  /* Center */ with the context-content attribute
  justify-content: center;
}

.child {
  Margin: auto*/
  margin: auto;
}
Copy the code

7. The Grid

There are more ways to center a layout with the Grid than with Flex.

The CSS code is as follows:

.parent {
  height: 300px;
  /* Start Grid layout */
  display: grid;
  /* Method 1 */
  justify-items: center;
  /* Method 2 */
  justify-content: center;
}

.child {
  Margin: auto*/
  margin: auto;
}
Copy the code

These are the common ways of horizontal center layout.

Vertical center

Vertical layout is also relatively simple, there are many methods, here summarized six common layout methods, their common CSS code is as follows:

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}

Copy the code

The HTML structure is also fixed, that is, one parent wraps one child, which is fixed at 300px by 300px. The code looks like this:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

The final result is as follows:

1. Block level elements in a row are vertically centered

Display: inline-block, vertical-align: middle; And make the parent element rows the same height.

The CSS code is as follows:

.parent {
  /* Sets the line height */ for the parent container
  line-height: 500px;
}

.child {
  /* Sets the child element to an inline-block element */
  display: inline-block;
  /* vertical-align: bottom; Implement center */
  vertical-align: middle;
}
Copy the code

2. Realization of positioning mode (Method 1)

The first way to achieve through positioning is relatively simple, in fact, through top: 50%; Margin-top: equal to half of the negative height to achieve vertical center.

The CSS code is as follows:

.parent {
  /* Enable relative positioning for the parent container */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  /* margin-top: equal to half of the negative height */
  margin-top: -150px;
}
Copy the code

3. Realization of positioning mode (Method 2)

Margin :auto; margin:auto; margin:auto; Can achieve vertical center.

The CSS code is as follows:

.parent {
  /* Enable relative positioning for the parent container */
  position: relative;
}

.child {
  height: 300px;
  position: absolute;
  /* Vertically pull full */
  top: 0;
  bottom: 0;
  /* margin: auto */
  margin: auto;
}
Copy the code

4. Realization of positioning mode (Method 3)

The third way through positioning is more flexible, suitable for a variety of occasions, using top with Tansform.

The CSS code is as follows:

.parent {
  /* Enable relative positioning for the parent container */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Copy the code

5. The Flex project

There are many ways to achieve this vertically centered layout with Flex.

The CSS code is as follows:

.parent {
  /* Enable flex layout */
  display: flex;
  /* Method 1 */
  /* align-items: center; * /
}

.child {
  /* Method 2 */
  margin: auto;
}
Copy the code

There are more than two ways to implement a Flex layout, but here are the simplest ways

6. The Grid

There are more ways to center a layout with the Grid than with Flex.

The CSS code is as follows:

.parent {
  display: grid;
  /* Method 1 */
  /* align-items: center; * /
  /* Method 2 */
  /* align-content: center; * /
}

.child {
  /* Method 3 */
  /* margin: auto; * /
  /* Method 4 */
  align-self: center;
}
Copy the code

These are the common ways of vertically centered layouts.

Horizontal and vertical center

Horizontal and vertical layout is basically a combination of the above methods. Here is a summary of seven common layout methods, their common CSS code is as follows:

body {
  margin: 0;
}
.parent {
  height: 500px;
  width: 500px;
  background-color: #eebefa;
  margin: 0 auto;
}
.child {
  height: 300px;
  width: 300px;
  background-color: #f783ac;
}


Copy the code

The HTML structure is also fixed, that is, one parent wraps one child, which is fixed at 300px by 300px. The code looks like this:

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

The final result is as follows:

1. Horizontal and vertical centering scheme at block level in the row

The steps are as follows:

  1. The row height of the container element is equal to the height of the container

  2. Through the text – align: center; Achieve horizontal center

  3. Sets the child element to a horizontal block-level element

  4. Through the vertical – align: middle; Achieve vertical center

The CSS code is as follows:

.parent {
  /* 1. Set the line height to the container height */
  line-height: 500px;
  /* text-align: center; Achieve horizontal center */
  text-align: center;
}
.child {
  /* Sets the child element to a horizontal block-level element */
  display: inline-block;
  /* vertical-align: bottom; Achieve vertical center */
  vertical-align: middle;
}
Copy the code

2. Horizontal and vertical centering scheme for positioning (I)

The steps are as follows:

  1. Positions child elements relative to container elements

  2. The child element turns on absolute positioning

  3. Sets the offset of this element to 50% minus half the width/height

The CSS code is as follows:

.parent {
  /* 1. Position the child element relative to the element */
  position: relative;
}
.child {
  /* 2. Enable absolute positioning */
  position: absolute;
  /* 3. Set the offset of this element to 50% minus half of the width/height */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}
Copy the code

3. Horizontal and vertical centering scheme for positioning (II)

The steps are as follows:

  1. Positions child elements relative to container elements

  2. The child element turns on absolute positioning

  3. Sets the offset of this element to 50%

  4. Move the element back by margin – value

The CSS code is as follows:

.parent {
  /* 1. Position the child element relative to the element */
  position: relative;
}
.child {
  /* 2. Enable absolute positioning */
  position: absolute;
  /* 3. Set the offset of this element to 50% */
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}
Copy the code

4. Horizontal and vertical centering scheme for positioning (III)

The steps are as follows:

  1. Positions child elements relative to container elements

  2. The child element turns on absolute positioning

  3. Pull the child elements across the container

  4. Achieve horizontal and vertical center through Margin: Auto

The CSS code is as follows:

.parent {
  /* 1. Position the child element relative to the element */
  position: relative;
}
.child {
  /* 2. Enable absolute positioning */
  position: absolute;
  /* 3. Pull the child element across the container */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 4. Margin :auto */
  margin: auto;
}
Copy the code

5. Horizontal and vertical centering scheme for positioning (IV)

The steps are as follows:

  1. Positions child elements relative to container elements

  2. The child element turns on absolute positioning

  3. Sets the offset of this element to 50%

  4. The center is implemented by reverse-offset translate

The CSS code is as follows:

.parent {
  /* 1. Position the child element relative to the element */
  position: relative;
}
.child {
  /* 2. Enable absolute positioning */
  position: absolute;
  /* 3. Set the offset of this element to 50%*/
  left: 50%;
  top: 50%;
  /* Center */ with reverse offset of translate
  transform: translate(-50%, -50%);
}
Copy the code

6. The Flex project

The steps are as follows:

  1. Set the element to the Flex layout

  2. Implementation-content: Center and align-items: Center or margin: Auto; The implementation.

The CSS code is as follows:

.parent {
  /* 1. Set the element to Flex layout */
  display: flex;
  /* 2. Implement */ with context-content and align-items: center
  /* justify-content: center; align-items: center; * /
}
.child {
  /* Or margin Auto */
  margin: auto;
}
Copy the code

7. The Grid

The implementation of Grid scheme is relatively simple and has many ways.

The CSS code is as follows:

.parent {
  /* 1. Set the element to Grid */
  display: grid;
  /* Implements */ through the items property
  /* align-items: center; * /
  /* justify-items: center; * /
  /* short for items */
  /* place-items: center; * /

  /* or via the content property */
  /* align-content: center; * /
  /* justify-content: center; * /
  /* Short for content */
  /* place-content: center; * /
}
.child {
  /* Or margin Auto */
  /* margin: auto; * /
  /* or via the self attribute */
  /* align-self: center; justify-self: center; * /
  /* short for self */
  place-self: center;
}
Copy the code

Horizontal and vertical centers are mostly achieved through a combination of the above two layouts.

Two columns of the layout

A two-column layout is an adaptive layout with a column of constant width (or possibly width determined by child elements). The final effect looks like this:

The HTML structure used is as follows:

<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">Fixed width</div>
  <div class="right">The adaptive</div>
</div>
Copy the code

The common CSS code is as follows:

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
.right {
  height: 400px;
  background-color: #c0eb75;
  font-size: 70px;
  line-height: 400px;
}
/* Clear float */
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Copy the code

Float +calc(); float+calc(

The steps are as follows:

  1. The left column floats

  2. The right column floats

  3. The width of the right column is 100% of the parent minus the width of the left column

The CSS code is as follows:

.left {
  /* The left column floats */
  float: left;
}
.right {
  /* The right column floats */
  float: left;
  /* Width minus left column width */
  width: calc(100% - 200px);
}
Copy the code

Float +margin-left float+margin-left

The steps are as follows:

  1. The left column floats

  2. The left side of the container has the margin of the width of the container in the left column by margin

The CSS code is as follows:

.left {
  /* The left column floats */
  float: left;
}
.right {
  /* Make the left side of the container 200px */ by margin
  margin-left: 200px;
}
Copy the code

3. Absolute +margin-left completes the left column constant width and right column adaptive

The steps are as follows:

  1. Enable locating out of document flow

  2. The left side of the container has the margin of the width of the container in the left column by margin

The CSS code is as follows:

.left {
  /* Enable locating out of document flow */
  position: absolute;
}
.right {
  /* Make the left side of the container 200px */ by margin
  margin-left: 200px;
}
Copy the code

It is worth noting that the left column of the above schemes must be fixed width to achieve, and the left column of the following schemes can be supported by children.

Float +overflow: float+overflow: float+overflow

The steps are as follows:

  1. The left element starts to float

  2. The right adaptive element setting overflow creates a BFC to complete the adaptation

The CSS code is as follows:

.left {
  /* 1. The left element floats */
  float: left;
}
.right {
  /* 2. Set overflow to create a BFC to complete the adaptation */
  overflow: hidden;
}
Copy the code

5. The Flex project

This is done primarily through Flex properties with the following example code:

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; Said the flex - turns up: 1; That is, the item occupies all remaining space */
}
Copy the code

6. The Grid

The Grid layout provides this functionality mainly through the template property, as shown below:

.container {
  display: grid;
  /* Divide it into two rows, one with its own width and one with the remaining width */
  grid-template-columns: auto 1fr;
}
Copy the code

Three column layout

There are two main types of three-column layouts:

  • The first is that the first two columns are fixed width, and the last column is adaptive. This is essentially no different from the two-column layout, which can be achieved by referring to the two-column layout.

  • The second is the fixed width of the two columns before and after, and the middle is self-adaptive. The final effect is as follows

The public CSS is as follows:

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
}
.content {
  height: 400px;
  background-color: #d9480f;
}
.right {
  height: 400px;
  width: 200px;
  background-color: #c0eb75;
}
.left..content..right {
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
/* Clear float */
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Copy the code

The HTML structure is as follows:

<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="content">content</div>
  <div class="right">right</div>
</div>
Copy the code

1. Float implementation

Implementation steps:

  1. The HTML structure needs to be adjusted to complete the effect.
<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="right">right</div>
  <div class="content">content</div>
</div>
Copy the code

  1. The left column container turns on the left float

  2. The right column container enables the right float

  3. The adaptive element setting overflow creates a BFC to complete the adaptation

The CSS code is as follows:

.left {
  /* 1. Enable the left float for the left column container */
  float: left;
}
.content {
  /* Adaptive element setting overflow creates a BFC to complete the adaptation */
  overflow: hidden;
}
.right {
  /* 2. Enable the right float for the right container */
  float: right;
}
Copy the code

2. Float implementation (2)

Implementation steps:

  1. The HTML structure needs to be adjusted to complete the effect.
<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="right">right</div>
  <div class="content">content</div>
</div>
Copy the code

  1. The left column container turns on the left float

  2. The right column container enables the right float

  3. Make the middle adaptive width of the parent container minus two constant width columns

The CSS code is as follows:

.left {
  /* 1. Enable the left float for the left column container */
  float: left;
}
.content {
  /* 3. Make the middle adaptive width equal to the parent container minus two constant width columns */
  width: calc(100%-400px);
}
.right {
  /* 2. Enable the right float for the right container */
  float: right;
}
Copy the code

3. Achieved through Position

Implementation steps

  1. The left and right columns leave the document flow and are offset to their own regions

  2. Make the middle adaptive width of the parent container minus two constant width columns

  3. Shrink the container inward by margins

The CSS code is as follows:

.left {
  /* 1. The left and right columns are separated from the document flow and offset to their own region */
  position: absolute;
  left: 0;
  top: 0;
}
.content {
  /* 2. Make the middle adaptive width equal to the parent container minus two constant width columns */
  width: calc(100%-400px);
  /* 3. Shrink the container inward by the margin */
  margin-right: 200px;
  margin-left: 200px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}
Copy the code

4. The Flex project

Implementing this functionality through Flex layout is primarily done through Flex properties.

The CSS code is as follows:

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; Said the flex - turns up: 1; That is, the item occupies all remaining space */
}
Copy the code

5. The Grid scheme

The Grid layout provides this functionality primarily through the Template property.

The CSS code is as follows:

.container {
  display: grid;
  /* Divide it into two rows, one with its own width and one with the remaining width */
  grid-template-columns: auto 1fr auto;
}
Copy the code

Uniform layout

Equal layout is to divide a container into equal parts. This section uses four equal parts as an example to introduce four methods.

The common CSS sections are as follows:

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.item {
  height: 100%;
}
.item1 {
  background-color: #eccc68;
}
.item2 {
  background-color: #a6c1fa;
}
.item3 {
  background-color: #fa7d90;
}
.item4 {
  background-color: #b0ff70;
}
/* Clear float */
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Copy the code

The public HTML code is as follows:

<! -- Parent element clears float -->
<div class="container clearfix">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>
Copy the code

The final result is shown below:

1. Floating + percentage mode

This is a simple way to turn on the float so that each element is 25% of the width.

The CSS code is as follows:

.item {
  /* Open float, each element takes 25% width */
  width: 25%;
  float: left;
}
Copy the code

2. In-line block level + percentage mode

This is similar to the above approach, but note that inline block-level elements have several pixels that resemble margins, resulting in each exceeding the container by 25%.

The CSS code is as follows:

.item {
  /* Sets each element as an inline block level element, each element is 24.5% of the width */
  width: 24.5%;
  /* Because inline block-level elements have a few pixels similar to the margin, each of 25 will exceed the container */
  display: inline-block;
}
Copy the code

3. The Flex project

Implementing this functionality through Flex layout is primarily done through Flex properties.

The CSS code is as follows:

.container {
  /* Enable flex layout */
  display: flex;
}
.item {
  /* Each element has the same width */
  flex: 1;
}
Copy the code

4. The Grid

The Grid layout provides this functionality primarily through the Template property.

The CSS code is as follows:

.container {
  /* Start grid layout */
  display: grid;
  grid-template-columns: repeat(4.1fr);
  /* Use the repeat function to generate the following code */
  /* grid-template-columns: 1fr 1fr 1fr 1fr; * /
}
Copy the code

Sticky Footer layout

The Sticky Footer layout is not a new front-end technology and concept, it is a web layout. If the page content is not long enough, the bottom bar is fixed to the bottom of the browser; If long enough, the bottom bar follows the content. As shown below:

Here are four ways to implement this layout

The common CSS code is as follows:

body {
    margin: 0;
}
.container {
    height: 400px;
    display: flex;
}
.left {
    height: 400px;
    width: 200px;
    background-color: #f759ab;
}
.content {
    height: 400px;
    background-color: #52c41a;
    flex: 1;
}
.right {
    height: 400px;
    width: 200px;
    background-color: #f759ab;
}
.left..content..right {
    font-size: 70px;
    line-height: 400px;
    text-align: center;
}
.header {
    height: 100px;
    background-color: #70a1ff;
}
.footer {
    height: 100px;
    background-color: #ff7a45;
}
.header..footer {
    line-height: 100px;
    font-size: 52px;
    text-align: center;
}
Copy the code

The public HTML is as follows:

<div class="main">
    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>
Copy the code

1. Absolute positioning

The steps to achieve Sticky Footer layout through absolute positioning are as follows:

  1. Set the outermost container height to 100%;

  2. Position child elements relative to container elements and set the minimum height of container elements to 100%;

  3. Set the padding-bottom to the footer height in the middle area;

  4. The bottom bar is absolutely positioned and always adsorbed at the bottom can be achieved.

The CSS code is as follows:

/* 1. Set the outermost container to 100% */
html.body {
    height: 100%;
}
/* 2. Position the child element relative to the container element and set the minimum height of the container element to 100% */
.main {
    position: relative;
    min-height: 100%;
}
/* 3. Set the padding-bottom in the middle area to the footer height */
.container {
    padding-bottom: 100px;
}
/* Since absolute positioning is enabled, the width is adaptive, set to 100% bottom:0 always stays at the bottom */
.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}
Copy the code

2. Use calC function

Using the calc function is simpler, with the height of the middle container at least 100% of the viewport width – the height of the top and bottom sections will do the trick.

The CSS code is as follows:

.container {
    /* The middle part of the container should be at least 100% of the width of the viewport - the height of the top and bottom sections will do the job */
    min-height: calc(100vh - 200px);
}
Copy the code

3. The Flex project

The implementation steps are as follows

  1. Enable flex layout

  2. Change the layout orientation of the child elements to be vertical

  3. Set the minimum height to the current viewport so that no matter how high the middle part is, it can always stay at the bottom

  4. Set the middle part of the container height to adaptive

The CSS code is as follows:

.main {
    /* Enable flex layout */
    display: flex;
    /* Change the layout direction of the child elements to vertical */
    flex-flow: column;
    /* Set the minimum height to the current viewport, so that no matter how high the middle part is, it can always stay at the bottom */
    min-height: 100vh;
}
.container {
    /* Set the middle part to be adaptive */
    flex: 1;
}
Copy the code

4. The Grid

The implementation steps are as follows

  1. Enable grid Layout

  2. Set the minimum height as the current viewport so that no matter how high the middle part is, it can always stay at the bottom

The CSS code is as follows:

.main {
    /* Start grid layout */
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Set the minimum height to the current viewport, so that no matter how high the middle part is, it can always stay at the bottom */
    min-height: 100vh;
}
Copy the code

Full screen layout

All the layout is mainly applied in the background, and the main effects are as follows:

Here are three ways to implement a full-screen layout.

The common CSS code is as follows:

body {
  margin: 0;
}
body.html..container {
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.content {
  background-color: #52c41a;
  /* * For the layout of the middle department, see the two-column three-column layout */
  display: grid;
  grid-template-columns: auto 1fr;
}
.left {
  width: 240px;
  background-color: #52c41a;
  font-size: 80px;
  line-height: calc(100vh - 200px);
}
.right {
  background-color: #f759ab;
  font-size: 60px;
}
.header {
  height: 100px;
  background-color: #70a1ff;
}
.footer {
  height: 100px;
  background-color: #ff7a45;
}
.header..footer {
  line-height: 100px;
  font-size: 52px;
}
Copy the code

The HTML structure is as follows:

<div class="container">
    <div class="header">header</div>
    <div class="content">
        <div class="left">navigation</div>
        <div class="right">
            <div class="right-in">Adaptive, scroll bar appears beyond height</div>
        </div>
    </div>
    <div class="footer">footer</div>
</div>
Copy the code

1. Use calC function to implement

The implementation steps are as follows:

  1. Calculate the height of the intermediate container using the calc function.

  2. Overflow: set overflow: auto for containers with scrollbars in the middle.

The CSS code is as follows:

.content {
    overflow: hidden;
    /* Calculate the height of the container by calc */
    height: calc(100vh - 200px);
}
.left {
    height: 100%;
}
.right {
    /* If it exceeds the scroll bar */
    overflow: auto;
    height: 100%;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

2. The Flex project

Using Flex to implement this layout is relatively simple.

The CSS code is as follows:

.container {
    /* Enable flex layout */
    display: flex;
    /* Change the layout direction of the child elements to vertical */
    flex-flow: column;
}
.content {
    /* If it exceeds the scroll bar */
    overflow: auto;
    /* Set the middle part to be adaptive */
    flex: 1;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

3. The Grid

The Grid layout is very handy to implement with the template property.

The CSS code is as follows:

.container {
    /* Start grid layout */
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.content {
    /* If it exceeds the scroll bar */
    overflow: auto;
}
.right-in {
    /* Assume the container has 500px elements */
    height: 500px;
}
Copy the code

{the}

Write in the last

If you are reading this, I am honored, if you like this article, you can give this article a little like; If you like this column, I will keep updating it to more than 100 posts, you can click on the link at the back to learn from the front – a bowl week column – nuggets (juejin. Cn) after entering to pay attention.

And you can give me a little attention, too.

Phase to recommend

  • – Juejin (juejin. Cn)