First of 2 divs empty

Question

So I was trying to get into HTML etc and was just playing around and came over this problem: What I want to do is create a header div with the size of 5% height and 100% width and a div on the left that has a height of the remaining 95%.

The div that is supposed to be on the left, works perfectly, but the one above is just empty if I don't add any elements in it, and when I add Elements, the div just gets the height of the element.

I want both Divs to have the size they are suppsoed to have:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0 auto;
        }

        #header
        {
            height 10%;
            width: 100%;
            background-color: green;

        }

        #menu
        {

            height: 100%;
            width: 10%;
            background-color: royalblue;

        }

        a
        {
            width: 500px;
        }
    </style>
</head>
<body>

    <div id="header">
        Hey
    </div>

    <div id="menu">

    </div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:15

You cannot use percentages with height if the parent does not have an explicit height. In your case, since the <body> tag is set to the height of the window, it varies and cannot be used as the parent.

As said in that answer:

To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.

And, like this answer said,

The height of a block element defaults to the height of the block's content.

Simply put, I don't think you can do this in plain CSS.

However, you can do this with jQuery:

var set = function() {
    var height = $("#container").height();
    var fivePercent = $(window).height() * 0.05;
    var ninetyFivePercent = $(window).height() * 0.95;
    $("#div1").height(fivePercent);
    $("#div2").height(ninetyFivePercent);
};

if your HTML is like so:

<div id="div1">5% height</div>
<div id="div2">95% height</div>

I don't quite understand, in the answer you linked me it says that every ancestor needs a height of 100%, which I have. Could you Please correct my code? I believe I'd understand it then. — Simon S, Nov 08 '15 at 19:32

score 0 · Answer 2 · answered Nov 08 '15 at 19:14

Height doesn't work the same way as width when percentages are involved, mostly because it doesn't have a reference point if the divs are the top level elements in the body. The width of the screen is a given. With height, however, is the browser meant to take the height of the screen or the html document? I imagine this is because most websites traditionally scroll up and down and not left and right. If you want to set a height, you're best off using pixels. If you want the height of the div to be fixed and not change with a containing div, use overflow:hidden;

score 0 · Answer 3 · answered Nov 08 '15 at 19:27

0

Try to create a minimum height

 #header
        {
         min-height: 10%;
            height: 10%;
            width: 100%;
            background-color: green;

        }

answered Nov 08 '15 at 19:27

Omeiri Kouider

41
4

score 0 · Accepted Answer · answered Nov 08 '15 at 20:23

You have the right approach, but there was a typo in your CSS rule height: 10% (missing :), which broke your CSS rendering.

It basically works. The key concept is to have height: 100%; for both the html and the body elements, and you got that right (most people don't get that the first time around).

Alternatively, you could also use the viewport-percentage lenths vh, see: https://developer.mozilla.org/en-US/docs/Web/CSS/length

html, body {
  height: 100%;
}
body {
  margin: 0;
}
#header {
  height: 10%; /* compare to your original snippet */
  width: 100%;
  background-color: green;
}
#menu {
  height: 90%;
  width: 10%;
  background-color: royalblue;
}

<div id="header">
  Hey
</div>
<div id="menu">
  Hay
</div>

First of 2 divs empty

4 Answers4