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

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%;}
css


Solution 1:[1]

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!

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman

Related Questions