Why isn't height: 100% working on this div?

Question

The question seems simple enough. Like a good little nerd I've done my research. Everything that I've found says that for something to have height: 100% every nested parent element must have a height for the child div to fill up. And that's exactly what I have.

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body>
        <div id="content"></div>
    </body>
</html>

That's literally all my HTML. I JUST started this project, which is part of the reason I'm so bewildered. My CSS looks like this:

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

html {
    height: 100%;
}

body {
    min-height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: lightcoral;
}

That's it. That's all my code. The background color of #content is exclusively so I can see the space it takes up. If I add text in the div or change its height to a pixel value in the CSS, the color shows up. If I switch it back to this, it disappears. Additionally, I'm working in Chrome and when I mouse over source in the Elements tab of the dev tools, both html and body are very clearly the height of the window. When I mouse over the #content div, I can see the style in the dev tools where it says height: 100%, but the height is 0px. I'm beyond perplexed. Any ideas?

div height = div contents, so no contents = 100% height of 0. add a min-height using px to have a constant coloured div — treyBake, Oct 02 '18 at 10:48
The body has a height of `auto`, the div has a height of `100%`, `100%` of `auto` is `auto` — Quentin, Oct 02 '18 at 10:49
@Quentin the body has a height of `100%`, I set it manually. — Elle Nolan, Oct 02 '18 at 10:50
@ElleNolan body has a `min-height` - not `height`, `height` will still be `auto` — treyBake, Oct 02 '18 at 10:51
@ThisGuyHasTwoThumbs If that's the case, is it even possible to make a div that tall? I wanted `min-height: 100%` but if it will only stretch as far as its contents then this is an exercise in futility. Is there a solution to my problem with flexbox or something? — Elle Nolan, Oct 02 '18 at 10:51
Which browser aer you using? The color is shown successfully for IE11 and Chrome 45 — Mumrah81, Oct 02 '18 at 10:53
@Quentin So how would I go about creating a div with a `min-height` equal to 100% of the screen without setting `body { height: 100%; }`? Because I don't want to do that since it messes with everything if the page scrolls down - overflow ends up being outside `body`. How can I avoid that? — Elle Nolan, Oct 02 '18 at 10:53
@ElleNolan — https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ — Quentin, Oct 02 '18 at 10:54
@ElleNolan you can use `height: 100vh` but it's really not what you want, if you want the whole body to be full height, target the body, not a child div — treyBake, Oct 02 '18 at 10:55
I'm gonna take a gander at what Quentin sent me, that holy grail crap. It should get done what I need. Thank you though! — Elle Nolan, Oct 02 '18 at 10:56

score 0 · Answer 1 · answered Oct 02 '18 at 10:52

0

In the body elementy, you need a "real" heightsetting - min-height: 100%; isn't sufficient as a reference for a relative child element height setting. So change min-height: 100%; to height: 100%; there.

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

html {
    height: 100%;
}

body {
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: lightcoral;
}

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

    <body>
        <div id="content"></div>
    </body>
</html>

P.S.: Your closing <body> tag was lacking the / character - I changed that to </body> in your code

answered Oct 02 '18 at 10:52

Johannes

64,305
18
73
130

The lack of
was simply an error in me manually typing up the code into SE. And I wanted to avoid that because setting the body's height to a hard 100% can have unintended side effects if the page has overflow and needs vertical scroll. It messes with CSS and other crap. So your solution does work and if nobody answers anything better I'll accept it, even though it's not exactly what I was going for. Thanks!
– Elle Nolan Oct 02 '18 at 10:59
You can add `overflow: visible` to `body`, then it will expand and scroll (within HTML) if needed. – Johannes Oct 02 '18 at 11:03
In my experience it still scrolls fine, it just has stylistic side-effects that are difficult to predict and remedy. Adding gaps place and such. Plus it messes with `window.scrollTo` in JavaScript, which I use for sinusoidal scroll animations. – Elle Nolan Oct 02 '18 at 11:05

Why isn't height: 100% working on this div?

1 Answers1