Lots of pr...">

Geek asks and answers

Height and width of html and body elements

If I have the following markup

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

with the following styles

html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

why my html, body and wrapper elements do not expand to 100% of the browser / view port height in FF13. The html, body and wrapper stop vertically at some distance from the bottom, looking into Firebug. The div container expands to full height, as the height is determined by the content.

(1263px X 558px for html, body, wrapper) and (960px X 880px for container)

If you look at the default value of 100%, it is higher, as shown in the first image below. But when I zoom in to the last possible zoom, the above does not happen as the second image below is shown, and the html, body, wrapper shell extends to full height.

(4267px X 1860px html, body, wrapper) - (960px X 1000px )

enter image description hereenter image description here

+5
2

html 100% , .

(jsfiddle):

<div id="div1">
    <div  id="div2">
        <div  id="div3">
            very much content
        </div>
    </div>
</div>

#div1 {
    height:300px;
    overflow-y:scroll;
    border: 1px solid black;
}
#div2 {
    height:100%;
}
#div3 {
    height:600px;
}

div1 300 . , div, , 300px. , height:100% html. .

, , .

, html {height:100%}

UPDATE:

3 :

  • - (, "200px", "50em" ). , .

  • - W3C:

, . (.. ), , "". .

  • . . ( : , , ..).

, :

  • height: 100% <html>. , (html - ), (initial containing block, browser window ). , 1024px.
  • <body> height: 100%. body html, 1024px.
  • height:auto #wrapper, #container <p>. , , , (, , , , , ..) .
  • - . , default styles, font-family, font-size .
  • <p>, <p> , ( ). #container #wrapper.

, #wrapper , 1 (1024 px, ), overflow body. visible, . overflow: visible html. window. , , W3C, , .

, , html body , . , (, jsfiddle, ):

scrolled part of the body

, body, canvas .. body. bg- . 100% W3C, (cutted):

, ... html, "transparent" "background-color" "none" "background-image", ... "body" element child . , , .

, . , Ctrl + - , , 20%. , , Ctrl + -, <p>, #container #wrapper , text. body html , window, Ctrl + -. , , : zoomed out page

. , width: 960px; #container, , . #container , : same issue but with the width

, .

+23

100%, . , - . , , .

width: 100%; .

html. , <wrapper> <container> , css. .

.container{
width: 100%;
}

<div class="container"></div>

,

-

+1

More articles:


All Articles