Css not full height of page

Question

I've got this image here, Just a simple bootstrap website.

Heres the code for it. I've tired 100% height as you can see but its not working ,I'm wanting the black background to be full height of the screen.

<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
  <p style="color:#333; padding-top:20%; font-size:80px">Text</p>

</div>

You most assuredly are going to get flagged for duplicate question as I see this question at least once a day, but simple answer, you must also set body and html elements to 100% height — Wobbles, Oct 19 '15 at 19:10
setting the body height and html height to 100% didnt work :( — Tester123, Oct 19 '15 at 19:13
sure it does https://jsfiddle.net/yh5ohsxd/ If it doesnt then there are more parent elements that you didnt include in your code. — Wobbles, Oct 19 '15 at 19:14
Possible duplicate of [div stretch 100% page height regardless of content](http://stackoverflow.com/questions/12043830/div-stretch-100-page-height-regardless-of-content) — Wobbles, Oct 19 '15 at 19:20

hungerstar · Answer 1 · 2015-10-19T19:25:35.787

In order for percentage heights to work, there needs to be a height set on the parent element. If the height of the parent is a percentage, then it will require it's parent to have a height set on it also. This is the reason why simply applying html, body { height: 100%; } might/is not working - your element might not be a child of the <body> and therefore breaking the chain.

For example, does not work, chain is broken:

<html class="percentage-height-set">
<body class="percentage-height-set">
    <div class="no-height-set">
        <div class="no-height-set">
            <div class="percentage-height-set"></div>
        </div>
    </div>
</body>
</html>

Works, chain is unbroken:

<html class="percentage-height-set">
<body class="percentage-height-set">
    <div class="percentage-height-set"></div>
</body>
</html>

Since percentage heights require a height to be set on their parent element the math might look like this:

[parent height] * [percentage height of child] = [pixel height of child]

And what you're doing:

?? * .05 = ??

With a set height on parent:

500px * .05 = 25px

score 0 · Answer 2 · answered Oct 19 '15 at 19:18

0

In css:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

Make sure, that your div isn't a child of another div

answered Oct 19 '15 at 19:18

Css not full height of page

2 Answers2