WEB standard layout Div CSS height adaptive method_html/css_WEB-ITnose

The problem of adaptive height. When using Div CSS for three-column or two-column layout, since the specific height is not known in advance, the height can only be adapted according to the increase or decrease of the content. In many cases, two columns (or three columns) are required. The height of Div is the same, which was easy to achieve using Table in the past, but it is more troublesome to use Div CSS. The general approach is to use background image filling or JS script control to make the height of each Div the same. Here is a solution, recorded as follows:

It mainly uses "hide container overflow" and "right inside" "Patch" and "Negative outer patch" combination method, the sample code is as follows:

< html XMLns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > Div CSS Example, Wayhome's Blog < 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 />
Middle < br />
Middle < br />
Middle < br />
Middle < br /> ;
Middle < br />
Middle < br />

< div id ="sidebar_right" style ="float:right;width: 100px; background:#0000FF;" > Right