Self-Adaptive Height Solution in CSS layout

This is a basic problem that is often encountered in Div + CSS layout. I personally think it is relatively simple and practical to use the background image filling method. Final effect.

CSS:

Body {Background: # ededed; font-size: 70%; font-family: Arial, Helvetica, sans-serif; line-Height: 130%; color: #666666; margin: 0; padding: 0; text-align: center;} # layout {width: 760px;/* -- for ie5.x -- */W \ idth: 740px; /* -- Other -- */margin: 10px auto; Border: solid 10px #999999; border-bottom: solid 9px #999999; /* -- add a 1 px DIV at the bottom to clear the float, so set the Bottom Frame to 9px -- */Background: url(bg.gif) # ffffff repeat-y left; /* -- fill in the background to solve the inconsistency between the left and right columns -- */Text-align: Left ;}# Sidel {float: Left; width: margin PX ;}# Sider {float: right; width: 540px;} Pre {padding: 10px; margin: 0 ;}. clear {Background: #999999; clear: Both; Height: 1px; overflow: hidden ;}

If you are interested, you can also refer to here, a solution that uses js to control the adaptive height, without the background image.