Home >Web Front-end >HTML Tutorial >Pure CSS realizes the automatic equalization of sidebar/column height_html/css_WEB-ITnose

Pure CSS realizes the automatic equalization of sidebar/column height_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:48:041243browse

Here is a direct introduction to what I think is the best method for automatically equalizing sidebar/column heights. The core CSS code is as follows (the value is not fixed):

Margin-bottom:-3000px; padding-bottom:3000px;

Together with the overflow:hidden attribute of the parent tag, a high degree of automation can be achieved equal effect.

Give a simple example, the following CSS and HTML code:

  #content{overflow:hidden;} .left{width:200px; margin-bottom:-3000px; padding-bottom :3000px; background:#cad5eb; float:left;} .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;} .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

 

Left side, no height attribute, adaptive to the highest one The height of the column
right, no height attribute, adaptive to the height of the highest column
middle, height 600 pixels, the height of the left and right columns is adaptive

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn