CSS - HTML tag not 100% of page

Question

Why is body, html, and #black sizing to the size of the viewport and not the document height?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>

html, body{
height:100%;
}


#black{
position:absolute;
width:100%;
min-height:100%;
height:100%;
background-color:#000000;
z-index:1000;
}

#shell{
height:962px;
width:972px;
margin:0 auto;

}
</style>

</head>

<body>
<div id="black"></div>

<div id="shell">


</div>

</body>
</html>

This is interesting. You want `#black` and `#shell` to have the same height, am I right? — Per Salbark, Oct 29 '13 at 15:51
For a start HTML and Body should be the document height, not the viewport height, that is the problem. But then #Black should also be the document height. #Shell should be the fixed height stated. — Guesser, Oct 29 '13 at 15:57

Per Salbark · Accepted Answer · 2013-10-29T16:11:40.087

1

You set your body and html tags to height: 100%. This "locks" them to the viewport height and then #black inherits that height. You need to use min-height:

html, body{
    min-height:100%;
}

UPDATE:

Forgot to mention something. Add this as well:

body {
    position: relative;
}

edited Oct 29 '13 at 16:11

answered Oct 29 '13 at 16:00

Per Salbark

3,597
1
23
24

That seems to fix html and body but #black is still at the viewport height using height1:00% or min-height:100% – Guesser Oct 29 '13 at 16:08
Position fixed has solved this when adding to #black – Guesser Oct 29 '13 at 16:10
Ok. I guess any position other than default fixes it. Don't ask me why though :) – Per Salbark Oct 29 '13 at 16:12
Although I still have the same problem on Opera mobile - with fixed. – Guesser Oct 29 '13 at 16:16
Did you try what I suggested in my update instead of using `fixed`? – Per Salbark Oct 29 '13 at 16:19

Tony Dinh · Answer 2 · 2013-10-29T16:02:30.613

0

Try this:

body, html {
    padding: 0;
    margin: 0;
}

EDIT:

#black {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%:
}

edited Oct 29 '13 at 16:02

answered Oct 29 '13 at 15:41

Tony Dinh

6,668
5
39
58

@user1209203 I have saved your html as a file using my css and it works. The black color fills all the page. – Tony Dinh Oct 29 '13 at 15:51
So then scroll down and it ends at the viewport height – Guesser Oct 29 '13 at 15:52
@TrungDQ: Try resizing your browser window to less than 962px height. You get a scoll bar and white space below the black. – Per Salbark Oct 29 '13 at 15:52
@user1209203 I have updated my answer. Then you can see the black everywhere. That is the only way I can think about if you don't want to move your `#shell` into the `#black`. – Tony Dinh Oct 29 '13 at 16:03
Not on Opera mobile though :( – Guesser Oct 29 '13 at 16:16
@user1209203 according to this answer http://stackoverflow.com/a/7851316/1420186 you may need to update your browser. But I always wonder why don't you use `body { background-color: black; }`. – Tony Dinh Oct 29 '13 at 16:18
the black is and overlay to fade from black – Guesser Oct 29 '13 at 16:37

Olaf Dietsche · Answer 3 · 2013-10-29T18:27:59.790

Because you said so. Saying

#black {
    position: absolute;
    width: 100%;
    height: 100%;
}

does set width and height to 100% of the containing block's size. The containing block in this case is the viewport.

When you want #black to cover the whole content, you must give it a different containing block. This can be done by positioning body

body {
    position: relative;
}

Now it covers the height. To do the same for the width, you can either set a width on body

body {
    position: relative;
    width: 972px;
}

or float body

body {
    position: relative;
    float: left;
}

See full JSFiddle

CSS - HTML tag not 100% of page

3 Answers3