Absolute positioning layout with 100% container height_CSS/HTML

Container height 100% is a frequently used requirement, which can be achieved by any container and does not require nesting relationships.

Consider the body as a container and as the upper label of the internal object. Setting its height to 100% is key.

The most basic example

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* Also set html for FF compatibility */
#box_2 { height:100%; background:#000;}

Overlapping positioning effect

#box_1 { position:absolute; top:0; left:0; width:100%; height:50px; background:#f00; z-index:2;}
#box_2 { position: absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1;}

Vertical relative height effect

#box_1 { position:absolute; top:0; left:0; width:100%; height:30%; background:#f00; z-index:2;}
#box_2 { position:absolute; left:0; top:30%; width:100%; height:70%; background:#000; z-index:1;}

Horizontal relative width effect

#box_1 { position:absolute; top:0; left:0; width:30%; height:100%; background:#f00; z-index:2;}
#box_2 { position:absolute; top:0; right:0; width:70%; height:100%; background:#000; z-index:1;}

This layout does not require float, and there are many variations:

1, N-column layout
2, N-row layout
3, N-column plus N-row cross layout

It is worth noting that when browsing the relative size container page in FF, the container size is adjusted in real time when the window size is adjusted, while IE will only take effect after the window is adjusted.

IE5.0/IE5.5/IE6.0 and FF1.5 tested passed