Home >Web Front-end >CSS Tutorial >Absolute positioning layout with 100% container height_CSS/HTML

Absolute positioning layout with 100% container height_CSS/HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 12:12:271589browse
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
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn