Absolute positioning layout for container height 100%

Container height 100% is a requirement that is often used, any container can be implemented, and no nested relationships are required.

The body as a container, as an internal object of the upper label, his height set to 100% is the key.

The most basic example

* {margin:0; padding:0; border:0;}
html,body {height:100%}//* Set HTML at the same time to be compatible with FF */
#box_2 {height:100%; background: #000;}

Effect Demo

Overlapping positioning effects

#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;}

Effect Demo

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;}

Effect Demo

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;}

Effect Demo

This layout does not need to float, but can also have a lot of changes:

1, n Column layout
2, n row layout
3, n column plus n row cross layout

It is noteworthy that under the FF to browse the relative size of the container page, adjust the size of the window at the same time the container size for real-time adjustment, and IE will only be adjusted after the window after the effect.

ie5.0/ie5.5/ie6.0 and FF1.5 test pass