Expanding a div to be its max height with height 100%

Question

I am trying to make a div expand to its max-height in px by using height 100%. It does not seem to want to work..

html

<div class="container">
    <h2>Dynamically populated using PHP</h2>
    <p>Dynamically populated using PHP</p>
</div>

css

.container {max-height:500px; height:100%;}

[Should do some research before posting...](http://stackoverflow.com/questions/7049875/height100-not-working) — chriz, Oct 31 '14 at 16:54
If you want a div to be it's max-height, why not just say `height:500px`? In CSS, a div can only obey a height given in a percent if it's parent has a defined height. — Adam Jenkins, Oct 31 '14 at 16:54
actually thats not exactly true. if the parent is smaller than desired then the child DIV if set to 100% will only go to the max height of its parent. — CMS_95, Oct 31 '14 at 17:38

hungerstar · Accepted Answer · 2014-10-31T17:11:53.247

max-height will cap the DIV's height at 500px but allow it to be smaller if it does not take up 500px.

height: 100% will inherit the height from the parent element's height.

Use height: 500px if you want the DIV to be 500px in height.

I have included an example. For both the .outer and .inner DIVs un-comment or comment out the height values. You will see that if the height of the parent DIV is not set, then height: 100% will not match the height of the parent and will default to it's own content's height.

.outer {
    background-color: blue;
    height: 100px;
}
.inner {
    background-color: red;
    color: white;        
    /*height: 100%;*/
    text-align: center;
    width: 50%;    
}

<div class="outer">
    <div class="inner">
        Inner
    </div>
</div>

Ian Hazzard · Answer 2 · 2014-10-31T17:12:01.233

0

The height of an element will not obey the percentage height unless its parent has a defined height. The only exception to this rule is the <html> tag and the <body> tag. They CAN have percentage heights. You could use this exception to get your desired output.

I did it in this JSFiddle.

Hope this helps!

edited Oct 31 '14 at 17:12

answered Oct 31 '14 at 17:06

Ian Hazzard

7,661
7
34
60

Not 100% accurate - the parent doesn't need to have a fixed height - it just needs to have a defined height. E.g. The parent can have a height of 100% as long as *it's* parent has a fixed height. – Adam Jenkins Oct 31 '14 at 17:08

score 0 · Answer 3 · edited May 10 '22 at 22:40

I found the real solution for this question. I say the real solution because specifying the px max height is not practical today. Here the solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    body, html {
        height: 100%;
        overflow: hidden;
    }
    .general {
        display: flex;
        height: 99%;
        max-height: 99%;
    }
    .panel {
        border: 1px dashed;
        width: 30%;
        height: 99%;
    }
    .main {
        border: 1px dotted;
        width: 100%;
        max-width: 89%;
        height: 99%;
    }
    </style>
</head>
<body>
<script>
</script>

<div class="general">
    <div class="panel">
        Panel: Left
    </div>
    <div class="main">
        Main: Right
    </div>
</div>

<script>
</script>
</body>
</html>

Expanding a div to be its max height with height 100%

3 Answers3

I did it in this JSFiddle.