Why the `h-full`/`height:100%` does not fill the empty hole for a div element?-CodePudding

The problem is that I have a title a subtitle and a footer. I would like the subtitle's div to span across the empty space between the title and the footer.

I tried setting h-full to the div but it does not seem to do anything.

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>
  );
}

Also, I would like the whole page to cover the entire screen so that the footer is at the bottom of the page.

CodePudding user response：

Try this.

    <div className="flex flex-col justify-start mx-auto w-9/12 h-full bg-red-300 text-center">
      <div className="bg-yellow-200 flex-1 flex flex-col">
        <div className="bg-blue-200 text-6xl">
          <h1>Title</h1>
        </div>
        <div className="bg-indigo-500 text-3xl flex-1">
          <h1>Subtitle</h1>
        </div>
      </div>
      <footer className="bg-green-200">Footer</footer>
    </div>

CodePudding user response：

Your header and subtitle is wrapped inside a div, you need to remove that wrapper div ,and then use flex-1 so that the subtitle div spans accross the entire height of the screen.

<div >
  <div >
    <h1>Title</h1>
  </div>
  <div >  //