Three pure CSS methods to implement high-level Columns

Three pure CSS methods to implement high-level Columns

In this article, I will introduce three methods to implement high-level columns using pure css. Setting the column height in the webpage layout is quite common. Therefore, this article aims to summarize some elegant pure CSS solutions.

The illustration is self-built ..

The three methods described below only use CSS and do not involve jQuery and JavaScript computing implementation methods. Therefore, I set the title of this article to three high-level columns for pure CSS methods.

Method-1: use Margins, Paddings, and Overflow to implement

The first method uses margins, paddings, and overflow to force the column height to be equal. This method requires a large padding at the bottom for each floating element. The key is to set overflow in the parent container: hidden to hide the excess part.

The following is the HTML tag of the "method-1" Example:

High-level columns implemented with pure CSS (1): implemented using Margins, Paddings, and Overflow

The first method uses margins, paddings, and overflow to force the column height to be equal. This method requires a large padding at the bottom for each floating element. The key is to set overflow in the parent container: hidden to hide the excess part.

The following are the CSS rules for this implementation:

This method is simple! It can be expanded to more row and column la S, or all types of grid la S.

Finally, add the media query in the CSS rule. OK. The following is the final result.

  This is a sidebar   The following are the CSS rules for this implementation:

Finally, I add media queries to CSS rules.

This method is simple! It can be expanded to more row and column la S, or all types of grid la S.

OK. The following figure shows the final result.

Method-2: implement high-level columns through CSS pseudo-class and positioning

This method uses the pseudo class: after. Set the parent container to relative location (position: relative), and then set the pseudo element of the container to absolute location (position: absolute) and height to 100% (height: 100% ). Then we need to adjust the width, left, and right required by the container pseudo element. Note: This method also requires setting overflow: hidden for the container to hide overflow.

HTML Tag (same as the html structure of method-1 ):

Implement High-Level columns with pure CSS (2): implement high-level columns with CSS pseudo classes and positioning

This method uses the pseudo class: after. Set the parent container to relative location (position: relative), and then set the pseudo element of the container to absolute location (position: absolute) and height to 100% (height: 100% ). Then we need to adjust the width, left, and right required by the container pseudo element. Note: This method also requires setting overflow: hidden for the container to hide overflow.

The left and right positions of the content and sidebar are 30 px to fill the parent container. Similarly, add a media query to it to make it a response:

This is a sidebar Okay, let's look at the CSS rules:

The left and right positions of the content and sidebar are 30 px to fill the parent container.

Similarly, a media query is added to it to make it responsive. The following is an example of "method-2:

Method-3: Use tables to implement high-level Columns

Method 3 using a table to implement a column height does not actually use a table (table elements are not used in HTML), but CSS attributes are set to the attributes of table elements for display. This method may be the simplest solution. However, because the "table" is used, you need to be especially careful about browser compatibility. Nevertheless,Method 3It is still an elegant, simple, and effective solution.

The following is the HTML of method-3:

Implement High-Level columns with pure CSS (3): implement high-level columns with tables

Method 3 using a table to achieve a column height does not actually use a table (table elements are not used in HTML), but only sets the CSS attribute to the attribute of the table element for display. This method may be the simplest solution. However, because "tables" are used, you need to be especially careful about browser compatibility. However, it is still an elegant, simple, and effective solution. The following is the HTML of method-3:

We will set the parent element to display: table. I reset the container padding: 0 to make up for the border-spacing attribute in the table. Here is our CSS:

Finally, add a media query to make it responsive.

This is a Sidebar. CSS section:

We set the parent element to display: table. Reset the container padding: 0 to compensate for the border-spacing attribute in the table.

Method-3 Example results:

OK. The above are the three methods to solve high-column problems such as pure CSS implementation.