The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer.
I attempted using h-full on the div element, but it had no noticeable effect.
export default function ASD() {
return (
<div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
<div className="bg-yellow-200">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl">
<h1>Subtitle</h1>
</div>
</div>
<footer className="mt-auto bg-green-200">Footer</footer>
</div>
);
}
Furthermore, I aim to ensure that the entire page fills the screen completely, positioning the footer at the bottom of the page.