Div CSS height adaptive solution_html/css_WEB-ITnose

Redirect to

These days I use div css to write websites. It looks up, middle and bottom, with three columns on the left, middle and right in the middle. However, these three columns are not of equal height but happen to have different colors. Background, the result is that IE, Firefox...the actual effects of these browsers are all uneven in length. How to make these three columns adapt to the height?

After debugging for a long time and searching, I finally found a solution. When using Div CSS for three-column or two-column layout, the specific height is not known in advance and the height can only be adapted according to the increase or decrease of the content. To make two columns (or three columns) the same height, it is easy to achieve using Table, but it is more troublesome to use Div CSS. According to the general practice, most of them use background image filling or JS script to make the height the same, but these are not the best methods, I think...

The following introduces the use of "hidden container overflow" and "positive inner patch" "Method of combining "negative outer patch"

Main code:

#wrap{overflow:hidden;} /* outer container* / 
#sidebar_left,#sidebar_right{padding - bottom:100000px;margin - bottom: - 100000px;} /* Column*/

Complete example code

< style type = " text/css " >



< body >
< div id = " wrap " style = " width:300px; background:#FFFF00; " >
< div id = " sidebar_left " style = " float:left;width:100px; background:#FF0000; " > Left
< div id = " sidebar_mid " style = " float:left;width:100px; background:#666; " >
Middle < ; br />
Middle < br />
Middle < br /> ; br />
Middle < br />
Middle < br /> < div id = " sidebar_right " style = " float:right;width:100px; background:#0000FF; " > Right