Example of how to set up a multi-column equal height layout with CSS

Initially, multiple columns have different content sizes and heights. Now you need to set different backgrounds to display, and the height of each column needs to be consistent. Then this requires the use of multi-column equal height layout.

The final desired effect:

1. True equal height layout

flex technical point: flexible box layout flex, the default value is the feature of built-in equal height layout.

When defining a flex layout, there are some default values.

flex-direction property defines the direction of the main axis. The default value is row , which is usually displayed horizontally. The main axis of the flex container is defined to be the same as the text direction. The main start and main end are in the same direction as the content.

align-item property defines how the flex item is aligned in the cross-axis (vertical axis) direction of the current line of the flex container. The default value is stretch , and the element is stretched to fit the container.

<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS

.box {
  display: flex;
}
.left {
  width: 300px;
  background-color: grey;
}
.center {
  flex: 1;
  background: red;
}
.right {
  width: 500px;
  background: yellow;
}

See the Pen equal-hight-layout-flex by weiqinl ( @weiqinl ) on CodePen .

2. True equal height layout

table-cell Technical point: The table layout naturally has the characteristic of equal height.

If display is set to table-cell , this element will be displayed as a table cell. Similar to using the tags <td> or <th> .

HTML Structure

<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS Styles

.left {

  display: table-cell;

  width:30%;

  background-color: greenyellow;

}

.center {

  display: table-cell;

  width:30%;

  background-color: gray;

}

.right {

  display: table-cell;

  width:30%;

  background-color: yellowgreen;

}

3. Positive and negative values ​​of bottom inner and outer margins in fake equal-height column layout

Implementation: Set the overflow property of the parent container to hidden. Give each column a large bottom padding, then use negative margins of similar value to offset this height.

• Without considering scalability, you only need to set padding-bottom/margin-bottom to the height difference between the highest column and the lowest column to achieve the same height effect.
• Considering scalability, in order to prevent a column height from increasing or decreasing significantly in the future, we set a relatively large value.

Technical Points

• The background fills the padding, but not the margin. Margin is collapsible and can be set to negative values.
• float:left. Using float, the element is taken out of the document flow, making it float to the nearest element in the document flow. What this does is put three div elements side by side.
• overflow:hidden; Set the overflow property to hidden, and generate a block formatting context (BFC) to eliminate the impact of float. At the same time, as needed, the content is clipped to fit the padding box, hiding the part that exceeds the container.

HTML Structure

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

CSS

.box {
  overflow: hidden;
}
.box > div{
  /**
  * Set padding-bottom to a larger positive value.
  * Set margin-bottom to a negative value with a large absolute value.
  **/
  padding-bottom: 10000px;
  margin-bottom: -10000px;
  float:left;
  width:30%;
}
.left {
  background-color: greenyellow;
}
.center {
  background-color: gray;
}
.right {
  background-color: yellowgreen;
}

4. Fake equal height layout, background visual effect

Technical point: float float, and set the width of each column. Set the parent element to an inline block-level element, and then use a linear gradient image to set the background of the parent element to highlight the same height effect

The CSS linear-gradient function is used to create an image that represents a linear gradient of two or more colors.

display: inline-block , set to inline block-level elements.

<div class="box five-columns">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

CSS

/** You need to calculate the average width of each column yourself*/

.box {

  display: inline-block;

  background: linear-gradient(

    to right, 

    red, 

    red 20%,

    blue 20%,

    blue 40%,

    yellow 40%,

    yellow 60%,

    orange 60%,

    orange 80%,

    grey 80%,

    grey);

} 

.col {

  float: left; 

  width: 16%;

  padding: 2%;

}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.