height: 100% not working

Question

I'm trying to create a div (Menu) with a width of 20% of my screen and a height of 100% but the div does not display on the screen. I do not know why. Here is my code:

#Menu {
    display: inline-block;
    background-color: black;
    min-width: 20%;
    min-height: 100%
}
 
#Bar {
    float: right;
    background-color: blue;
    width: 80%;
    height: 100%;
    margin: 0;
    float: left;
}

<div id="Menu">Menu</div>
<div id="Bar">Bar</div>

you tell you CSS to float your `Bar` right and then left o_0? — blurfus, Apr 24 '17 at 00:39
This error is because your `div` tags are empty. Put some content and it will work. — Teocci, Apr 24 '17 at 00:57

score 0 · Answer 1 · answered Apr 24 '17 at 00:47

Since your div elements are empty, they will collapse to 0 height. A height of 100% does not help in this case.

You will find that you can display your elements if you include a min-height property.

I have made some modifications to get it to work, together with some fine-tuning. I always indent my real code, but I have left the modifications un-indented so that you can see them more easily.

#Menu { 
 display:inline-block; 
 background-color : black;
 min-width:20%; 
 min-height:100%;
margin: 0;
min-height:10px;
float: right;
}

#Bar {
 float:right;
 background-color : blue;
 width:80%; 
 height:100%;
 margin:0;
 float:left;
min-height: 10px;
}

<div id="Menu">
  
</div>
<div id="Bar">
 
</div>

"A height of 100% does not help in this case." - Normally it would, though, specifically if the parent element had a height `> 0`. — Siguza, Apr 24 '17 at 00:48

height: 100% not working

1 Answers1