min-height property not working as expected in css

Question

I want the divs to extend to full height when the content doesn't fully occupy the entire body. If the content becomes larger, the div should also grow larger with that.

The following is code:

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

body{
    min-height: 100%;
    background-color: lightblue;
    margin:0;
}

.inner{
    height: 100%;
    background-color: blue;
}

.outer{
    width: 70%;
    height: 100%;
    background-color: green;
    padding:40px;
}
</style>
    <div class="outer">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.
        </div>
    </div>
</body>
</html>

This is the link to JS Fiddle for the above code. I want the div to extend to full body height even when the content is small and also the divs should expand as the content increases.

This is a similar question, but the solution doesn't seem to work for me. I have read many similar questions, but none of them works for me. I am not able to figure it out.

https://stackoverflow.com/questions/4804581/css-expand-float-child-div-height-to-parents-height might be helpful — Manish Jain, Dec 15 '18 at 12:38
use vh instead of % like : { height:100vh } . This may help yours. — Vishnu Chauhan, Dec 15 '18 at 12:42

score 1 · Answer 1 · answered Dec 15 '18 at 13:45

It's because height of the body block is not specified explicitly.

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

My solution is set inner's min-height to 100vh

body{
    background-color: lightblue;
    margin:0;
}

.inner{
    background-color: blue;
    min-height: calc(100vh - 80px);
}

.outer{
    width: 70%;
    background-color: green;
    padding:40px;
    box-sizing: content-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>

<body>
 <div class="outer">
 <div class="inner">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.
 
 </div>
 </div>
</body>
</html>

score 1 · Answer 2 · answered Dec 15 '18 at 13:52

1

.inner{
    height: 100%;
    background-color: blue;
}

.outer{
    width: 70%;
    min-height:100%;
    min-height:calc(100% - 80px);
    background-color: green;
    padding:40px;
}

https://jsfiddle.net/arashgh/vj62o9nw/

answered Dec 15 '18 at 13:52

Arash t

13
5

Could you please explain to me why this works and not mine? – jibin mathew Dec 18 '18 at 19:46
of course, because the body, html and the parent of the considered element must have a specified height,and min-height or max-height is not enough. – Arash t Dec 20 '18 at 10:11

min-height property not working as expected in css

2 Answers2