CSS + DIV adaptive height layout

The head foot is fixed, and the middle area is adaptive to the content height. When the scroll bar is dragged, the foot always stays at the bottom.
The SolarDreamStudios solution gave me a good idea, but the key part was original. I always thought it would be better than the SolarDreamStudios solution, and they carefully read their code, but they seem to have made more effort in compatibility and are not tested.
A. Adaptive 100% in width
Structure code

The code is as follows:	Copy code
<Body> <Div id = "head"> head </div> <Div id = "head_height"> </div> <Div id = "middle"> </div> <Div id = "foot_height"> </div> <Div id = "foot"> foot </div> </Body>

Presentation code

The code is as follows:	Copy code
# Head {width: 100%; text-align: center; background: # FF9400; height: 100px; position: absolute; top: 0 ;} # Head_height {height: 100px ;} # Middle {margin: 20px ;} # Foot {width: 100%; text-align: center; background: # f00; height: 100px; position: absolute; bottom: 0 ;} * Html # foot {bottom:-1px ;} # Foot_height {height: 100px ;}

B. Fixed width center
Structure code

The code is as follows:	Copy code
<Body> <Div id = "head"> <Div id = "head_content"> head </div> </Div> <Div id = "head_height"> </div> <Div id = "middle"> </div> <Div id = "foot_height"> </div> <Div id = "foot"> <Div id = "foot_content"> foot </div> </Div> </Body>

Presentation code

The code is as follows:

Copy code

# Head {width: 100%; text-align: center; position: absolute; top: 0; left: 0 ;} # Head_content {line-height: 100px; width: 700px; margin: 0 auto; background: # FF9400; height: 100px ;} # Head_height {height: 100px ;} # Middle {margin: 20px ;} # Foot {width: 100%; text-align: center; position: absolute; bottom: 0 ;} * Html # foot {bottom:-1px ;} # Foot_content {line-height: 100px; width: 700px; margin: 0 auto; background: # f00; height: 100px ;} # Foot_height {height: 100px ;}

In IE6.0, FF1.5, and IE environments, sometimes the scroll bar is automatically displayed because of bugs (the same solution for SolarDreamStudios), and FF is the perfect result.