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

Question

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

Report

06 Feb 2022 at 07:07 PM

Lars

css

1 answer

OK

Tim · Answer 1

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.

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

css

Different background color for Odd / Even table rows - CSS

CSS font-size units PX to PT, IN, EM, REM conversion

Smooth move of HTML elements - animation with CSS

Full screen Not Clickable overlapping layer / overlay - CSS

How to change Checkbox to Toggle slider button using CSS ?

How to change top address bar color in mobile web browsers - CSS

Set CSS/HTML opacity - transparent background but not text

HTML list <ul> not showing items <li> on a new line

Resize / shrink top navigation menu bar on Scroll in Javascript