Skills | adaptive
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;}
Overlap Absolute Height 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:40%; height:100%; background: #f00; z-index:2;}
#box_2 {position:absolute; top:0; right:0; width:60%; height:100%; background: #000; z-index:1;}
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.