CSS Div height: 100%
a DIV where the height {height: 100%;} 100% has been assigned will not appear on the screen, but extends only as far as its contents last. Here you learn how to solve this problem:
HTML file
content
How it does not do:
CSS file: display example
html, body {
background-color: # 333333;}
# wrapper {
height: 100%;
background-color: # ffffff;
width: 80%;
margin: auto}
background-color: # 333333;}
# wrapper {
height: 100%;
background-color: # ffffff;
width: 80%;
margin: auto}
refers frequently to the above Code snippets related to the question of why the Firefox and other modern browsers the height of the DIVs would not get right. The Internet Explorer reacted to these CSS statements in the deed so as to present the questioner, the. It extends the height of the divs to the full screen height.
Even if many do not seem that way Firefox and Co. understand the statement correctly, the IE indicates - as so often - something wrong. The percentage amount of an element is in fact dependent on its parent element, in our case, the BODY. Since this but no amount has been assigned to the DIV can extend only so far as it is filled with content. The effect is that of the command {Height: auto;}.
How you do it right:
CSS file: display example
html, body {
background-color: # 333333;
margin: 0;
padding: 0 ;
height: 100%; / * IMPORTANT! DISPLAY AREA STRETCHED TO 100% * /}
# wrapper {
background-color: # FFFFFF;
width: 80%;
margin: auto; / * Div to centered * /
be min-height: 100%; / * minimum height for modern browsers * /
height: auto important ; / * Important rule for modern browsers! * /
height: 100%; / * minimum height for IE * /
overflow: hidden important ; / * FF scroll bar * / ;}
background-color: # 333333;
margin: 0;
padding: 0 ;
height: 100%; / * IMPORTANT! DISPLAY AREA STRETCHED TO 100% * /}
# wrapper {
background-color: # FFFFFF;
width: 80%;
margin: auto; / * Div to centered * /
be min-height: 100%; / * minimum height for modern browsers * /
height: auto important ; / * Important rule for modern browsers! * /
height: 100%; / * minimum height for IE * /
overflow: hidden important ; / * FF scroll bar * / ;}
The percentage indicating the height of a DIV based on the above Element. In most cases this is the "BODY" of a website. Therefore first must also be assigned to the BODY a height of 100%.
If you want to center the DIV representing a lateral distance on the site, help {margin: auto} a the allocation of a further. So that the whole is seen in the example below, I have the BODY a dark color (# 333333) and the DIV with id "wrapper", a white background (# ffffff) were added.
Now we give the DIV the altitude. First, they say the modern browsers, that the DIV extend over at least 100% is {min-height: 100%;}.
{height: auto important;}, with the help of important! Rule that the height of the divs not a subsequent {height: 100%;} is overwritten.
{height: 100%;} The information is only available for Internet Explorer and this is - as already mentioned - the desired statement. Shall cover the span cross-browser over the entire height of the page. If
but now the content of the site over the display area beyond and a scroll bar appears, lies the DIV when you scroll down not to the bottom. The can with the statement: preventing overflow {hidden}. Die! Important rule here also provides that the IE, this statement does not understands.
Read also:
