Fantastic CSS layout-Multi-column height

What is a high-level layout?

Let's look at a case:

 

The main content of the page in is a two-column structure, the left column is used for navigation, and the right column is used to display the content. We can see that they have a common border with a separator in the middle. The height of the left and right columns is not fixed. In this case, the height of the two columns must be consistent. The height on the left increases, the height on the right increases, and the height on the right increases. The height on the left also increases, otherwise, the "fault" effect will appear. Here, the High-Level layout is designed to maintain the integrity of the border lines. In some cases, it may be used to maintain the integrity of the background and achieve the effect that the overall consistency is not missing.

Layout Scheme

There are several different methods for High-Level la S, but so far I think the best and easiest method for browser compatibility is the padding compensation method. First, set the padding-bottom of the column to a value that is large enough, and then set the margin-bottom of the column to a negative value that is offset by the positive value of the previous padding-bottom, the parent container settings exceed the hidden level, so that the height of the parent container is the height of the column in the parent container when no padding-bottom is set. When the height of any column in the parent container is increased, then, the height of the parent container is pushed to the highest column height in the parent container. Other columns shorter than the parent container will use their padding-bottom to compensate for the height difference. Because the background can be used in the space occupied by the padding, and the border also changes with the padding, a blind eye is successfully completed.

Code

First, let's look at the absence of high-level la S.

Effect:

Then we use a high-level layout:

The effect is as follows:

During the specific operation, the size of the padding-bottom value depends on the actual situation of your project. If you are not sure, it doesn't matter if you set it to a larger value.

Final code:

<! DOCTYPE html>