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.
2 answers
solution1
1 2018-12-15 13:45:00
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 (ie, 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>
solution2
1 2018-12-15 13:52:41
.inner{
height: 100%;
background-color: blue;
}
.outer{
width: 70%;
min-height:100%;
min-height:calc(100% - 80px);
background-color: green;
padding:40px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.