Set DIV height to fill remaining space at the bottom - CSS

How can I set DIV's height using CSS, to fill remaining space at the bottom of website if there is some ?
0
give a positive ratinggive a negative rating
06 Feb 2022 at 07:07 PM
Hi,

To fill the remaining space on screen and automatically adjust DIV height, you can use the following solution based on display: flex; and viewport height. You can choose if you want to automatically adjust the height of the top, middle or bottom DIV, by using of flex: 1;


<style>

body { padding: 0px; margin: 0px; }

.content {
display: flex;
flex-direction: column;
height: 100vh;
}

.top {
width: 100%;
background-color: yellow;
min-height: 150px;
}

.middle {
width: 100%;
background-color: white;
min-height: 500px;
}

.bottom {
width: 100%;
background-color: aqua;
flex: 1;
}

</style>

<body>
<div class='content'>
<div class='top'>A</div>
<div class='middle'>B</div>
<div class='bottom'>C</div>
</div>
</body>


In this example, the height of bottom DIV will be automatically adjusted if there will be not enough content in the top and middle DIV. When there will be enough content in the first two DIVs, the bottom one will have a minimum necessary height.
0
give a positive ratinggive a negative rating
30 Mar 2022 at 04:45 PM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
Follow us on Facebook
2022 AnswerTabsTermsContact us