'How can Align Second element height until Bottom

This is my code

<body class="bodyTag h-100">

<div class="navbar">THis Is NavBar</div>

<div class=" d-flex bg-danger flex-column stretch   ">
    <div class="card-header" style=" background-color: #FF9933; width: 100%;">i am header</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff;"> i am body</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">i am footer</div>
</div>

I want to footer Must Come In End Means In bottom , and based on It second White Div Must stretch until footer

in any Resolution , Please Help me bottom fixed is Only fixing footer in Bottom But second White Div is not stretching until footer

this is output

javascripthtmlcsssass


Solution 1:[1]

I think what you are trying to do is display the whitespace according to the screen height.

I wrote a snippet that might solve your problem

<body class="bodyTag h-100">

<div class="navbar">Nav Bar</div>

<div style='display: flex; flex-direction: column; height: 100vh;  align-items: stretch;'>
    <div class="card-header" style=" background-color: #FF9933; width: 100% ">i am header</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff; flex-grow: 1;"> i am body</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">i am footer</div>
</div>

As you can see what i did was to apply a height of 100vh (screen's height), align the contents stretching and apply flex:1 to the white portion, meaning it will take the most amount of space. Say you wanted the header, body and footer of the same height, you just apply flex:1 to each

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 Rocio

Related Questions