Full-Page Div Doesn't Show up

Question

I have a HTML page with one div. The body code looks like this:

<div>
</div>

and the CSS looks like this:

body {
    margin:0;
    height:100vh;
    width:100vh;
}

    div {
    height:100vh;
    width:100vh;
    color:#000000;
}

I saw an example like this on another stackoverflow post, here.

I must be insanely stupid. Anyways, I made it so I could SEE the div, and it takes up the whole height now, but not the whole width. It takes up a little more than 1/2 of the space.

It's a white div, if it did appear what have you done to prove that? — Popnoodles, Dec 06 '13 at 01:59

score 1 · Answer 1 · answered Dec 06 '13 at 04:20

Perhaps this will be helpful. Because "Viewport Units" currently don't have great browser support, you may want to use height 100% instead. Viewport Unit Browser Support Table: http://caniuse.com/#search=vh

If you want the div to cover areas that go below the viewport into the scrollable areas, try the code below:

html{
margin:0;
padding:0;
border:none;
height:100%;
}

body {
margin:0;
padding:0;
border:none;
height:100%;
}

#wrapper-div {
min-height:100%;
}

The trick is setting the height to 100% on the html and body tags, and setting min-height 100% on the wrapper div. The div will expand 100% horizontally by default. Min and max width and height have great browser support, except IE6. (Note: If you still neet to support IE6, there is an easy hack that'll make it work. Add this to your wrapper-div, but your css won't validate{*display:inline; *zoom:1;})

Browser Support for Min and Max Height and Width http://caniuse.com/minmaxwh

Here's a JSFiddle that has both the 100% and Viewport Units to play with:http://jsfiddle.net/TalkingRock/ZHC5h/

If you want to use Viewport Units, try this code. It sets the width as vw, not vh:

body {
margin:0;
height:100vh;
width:100vw;
}

#wrapper-div {
height:100vh;
width:100vw;
background-color:#cccccc;
color:#000000;
}

Here's a quote from this article:http://dev.opera.com/articles/view/css-viewport-units/

1vw: 1% of viewport width
1vh: 1% of viewport height
1vmin: 1vw or 1vh, whatever is smallest
1vmax: 1vw or 1vh, whatever is largest

score 0 · Answer 2 · answered Dec 06 '13 at 02:01

0

Your setting your background to white. Its not going to show. Try using #000 for black.

answered Dec 06 '13 at 02:01

Ray

894
1
6
23

score 0 · Answer 3 · answered Dec 06 '13 at 02:03

It does work but like I mentioned: It's a white div, if it did appear what have you done to prove that?

Changing the background color proves it appears.

Working example http://jsfiddle.net/Cr3f2/

body {
    margin:0;
    height:100vh;
    width:100vh;
}

    div {
    height:100vh;
    width:100vh;
    color:#FF0000;
    background-color:#FF0000;
}

score 0 · Answer 4 · answered Dec 06 '13 at 02:16

0

perhaps you should change a bit the div attributes like this:

div {
height:inherit;
width: inherit;
color:#000000;

}

so that it will inherit the height and width of what is already indicated on the body css selector

answered Dec 06 '13 at 02:16

vishnu

730
2
6
26

Full-Page Div Doesn't Show up

4 Answers4