How to fill the div to the end of a sticky footer?

R

rook99

Guest
I am using codesandbox.io to show an example of what I am trying to do: https://n2nyg.csb.app

I am using tailwindcss framework and as you can see in the example above I am giving my first div element a default Red background color. And what I want to do Is to fill the Section white background to the end of the footer, I don't want the red background color in this case.

<body>
<div class="flex flex-col min-h-screen justify-between bg-red-600">

<div>

<header>
<nav class="flex items-center text-white bg-orange-600 h-16" style="
justify-content: center;
">Header with fixed height</nav>
</header>

<div class="w-full m-0 p-0 bg-cover bg-bottom text-white" style="
background-image: url(https://images.wallpaperscraft.com/image/glare_background_blur_dark_63553_1920x1080.jpg);
height: 60vh;
max-height: 460px;
">Image with max height
</div>

<section class="text-center bg-white py-12">section</section>

</div>

<div class="py-12 text-center text-white bg-green-400">
sticky footer
</div>

</div>
</body>

Continue reading...
 
Top