Can't change div height to percent

Question

I am trying to make a responsive div, but for some reason, changing the height to percent just ignores the height. I can only add a fix height.

The div I want to change in the example below is the mainContainer

html, body{
    width:100%;
    height: 100%;
}
.mainContainer{
    width:150%;
    height:550px; /*I want this to be 60% or something*/
    padding:10px;
    background-color:#080808;
    border-radius:5px;
}
.textContainer{ 
    width:55%;
    height:100%;
    float: left;
    background-color:#666666;
    border-radius:10px 0 0 10px;  /*TL TR BR BL*/
}
#map1 {
    width: 45%;
    height: 100%;
    margin-top:-15px;
    float:right;
    display:inline;
    border-radius:0 15px 15px 0;  /*TL TR BR BL*/
}
.contentBox{
    width:96%;
    height:100%;
    color:#F2F2F2;
    font-size:100%;
    padding-right:3%;
    padding-left:3%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


<section class="mainContainer">
        <div class="textContainer">
            <div class="intro"> 
                <div class="contentBox">
                             </div>
                      </div>
            </div>
           <div id="map1"></div>
</section>

in order to have a percent-based height ALL parent block level elements need an explicitly declared height. Post markup please. Also do you ever expect the document (html/body elements) to be TALLER than the viewport/window? — Ennui, Feb 19 '14 at 21:28

score 1 · Accepted Answer · answered Feb 19 '14 at 21:37

Your parent div to the element you are trying to give a height to needs to have as set height in order for the you to give the child element a height %.

.wrapper { width: 200px; height: 200px; background-color: black; }
.content { width: 100%; height: 60%; background-color: red; }
<div class="wrapper">
    <div class="content"></div>
</div>

http://jsfiddle.net/fy8Kx/

In your example just make sure the parent of .mainContainer has a height set to it and then you can make the height 60%

FluorescentGreen5 · Answer 2 · 2019-07-20T07:40:56.683

For those who are coming here, wondering why they can't see a big red block from something like <div style="width: 50%; height: 50%; background: red;"></div>, this answer is for you.

Also, no JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.

If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.

This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

score 0 · Answer 3 · answered Jun 09 '22 at 16:30

If you want to scale height according to viewport height, Use vh instead of %

.mainContainer{height:100vh;}

Here it scales as 100% of the viewport.

By the way width: *any*%; scales width according to viewport width it can also be written as vw but many don't use it because *any*% simply works.

Lastly, Don't do this

html, body{
    width:100%;
    height: 100%;
}

Your viewport is already its max height, width.

Can't change div height to percent

3 Answers3

Linked