Most attempts to accomplish this were made by assigning the property and value: div {Height:100%}-This alone will not work. The reason is that without a parent definedHeight, The DIV {Height:100%;} Has nothing to factor100%Percent of, and will default to a value of Div {Height: Auto;}-auto is an "as needed value" which is governed by the actual content, so that the DIV {Height:100%} Will a = only extend as far as the content demands.
The solution to the problem is found by assigningHeightValue to the parent container, in this case, the body element. Writing your body stlye to includeHeight 100%Supplies the needed value.
Body {
Margin: 0;
Padding: 0;
Height:100%;
}
Now whenHeight:100%; Is Applied to divs (or other elements) contained withing the body,HeightPercentage has a containing (body) value to work.
The following example is a three column, liquid layout100% HeightAssigned to both flanking Divs. Background images can be assigned to these divs and will render100%Of the windowHeight.
<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en"
Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en">
<Head>
<Title> one hundred percentHeightDivs </title>
<Style type = "text/CSS"Media =" screen ">
Body {
Margin: 0;
Padding: 0;
Height:100%;/* This is the key! */
}
# Left {
Position: absolute;
Left: 0;
Top: 0;
Padding: 0;
Width: 200px;
Height:100%;/* Works only if parent container is assignedHeightValue */
Color: #333;
Background: # eaeaea;
Border: 1px solid #333;
}
. Content {
Margin-left: 220px;
Margin-Right: 220px;
Margin-bottom: 20px;
Color: #333;
Background: # FFC;
Border: 1px solid #333;
Padding: 0 10px;
}
# Right {
Position: absolute;
Right: 0;
Top: 0;
Padding: 0;
Width: 200px;
Height:100%;/* Works only if parent container is assignedHeightValue */
Color: #333;
Background: # eaeaea;
Border: 1px solid #333;
}
# Left P {
Padding: 0 10px;
}
# Right P {
Padding: 0 10px;
}
P. Top {
Margin-top: 20px;
}
</Style>
</Head>
<Body>
<Div id = "Left">
<P class = "TOP"> This design uses a defined bodyHeightOf100%Which allows setting
Contained left and right divs100% Height. </P>
<P> This design uses a defined bodyHeightOf100%Which allows setting the contained left and
Right divs100% Height. </P>
<P> This design uses a defined bodyHeightOf100%Which allows setting the contained left and
Right divs100% Height. </P>
</Div>
<Div class = "content">
<P> This design uses a defined bodyHeightWhich100%Allows setting the contained left and
Right divs100% Height. </P>
</Div>
<Div class = "content">
<P> This design uses a defined bodyHeightWhich100%Allows setting the contained left and
Right divs100% Height. </P>
</Div>
<Div class = "content">
<P> This design uses a defined bodyHeightWhich100%Allows setting the contained left and
Right divs100% Height. </P>
</Div>
<Div id = "right">
<P class = "TOP"> to solve an inheritance issue displayed in Div # Right as rendered in opera, class P. Top
Using margin-top: 20; is applied to the first paragraph of each outer Divs. </P>
<P> This design uses a defined bodyHeightWhich100%Allows setting the contained left and
Right divs100% Height. </P>
<P> This design uses a defined bodyHeightWhich100%Allows setting the contained left and
Right divs100% Height. </P>
</Div>
</Body>
</Html>
Tiling backgrounds may also be deployed:
# Right {
Position: absolute;
Right: 0;
Top: 0;
Padding: 0;
Width: 200px;
Height:100%;/* Works only parent container is assignedHeightValue */
Color: #333;
Background: URL (images/mytile.gif) Repeat;
Border: 1px solid #333;
}
The above three column layout will not display properly in Netscape 4.x because of the position: absolute; Right: 0; styles of the DIV # right. A three column liquid layout was used for demonstration purposes,100% HeightCan be applied as required.
Remember to protect Netscape 4 from styles it cannot understand by using the @ import rule.
The above has been tested in opera6, IE6, and Mozilla 1.1-It shoshould work in most modern browsers.
Have fun!
XHTML +CSS+ Webstandards = freedom!
-Papabaer
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
