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