Use CSS to implement equal height columns_html/css_WEB-ITnose

Requirements

There are 3 horizontal blocks, and the contents of the blocks are more or less. Without setting the height, the heights vary. Now it is required that the three horizontal blocks have the same height, and the height is equal to the height of the tallest block.

Method 1

Use table layout. In a table, cells in the same row are of equal height.

Method 2

is as follows:

https://jsfiddle.net/maydayuiui/0rydnyv7/

Put the height of the block by setting padding-bottom Open so that they are much larger than the height of the content. Then set margin-bottom. If the height is not set for the block, when calculating the height of the block, padding-bottom margin-bottom plus content height will be used to calculate the height. Set margin-bottom to a negative value, and the absolute value is equal to padding-bottom. The calculated height is equal to the height of the content. At this time, the height of the tallest block determines the height of the parent element. The display effect of child elements includes padding effect. Finally, set overflow: hidden for the parent element to hide the part that is more than the height of the highest child element.