Fullscreen of nav + cover

Question

I need to have a screen that has top bar as a menu, that is a ul of my-10 , and the rest of the screen is a div with a background image. Together they should cover h-screen .
What classes should I give to the nav, and what to the div containing the image?

Thanks

Answer 1

You can achieve this by display type of flex .

For your scenario:

Use a nav and a div which is inside the parent element of flex flex-col h-screen And then give following classes for nav and div

• nav -> flex
• div -> flex-1

Try the following simple code:

<div className="flex flex-col h-screen">
  <nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
    <div class="logo">
      <h1 class="text-black ml-4 cursor-pointer text-2xl">Logo here</h1>
    </div>
    <ul class="flex">
      <li>
        <a
          class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
          href="#"
        >
          <i class="fas fa-home"></i> Home
        </a>
      </li>
      <li>
        <a
          class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
          href="#"
        >
          <i class="fas fa-question"></i> About
        </a>
      </li>
      <li>
        <a
          class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
          href="#"
        >
          <i class="fas fa-reply"></i> Contact
        </a>
      </li>
    </ul>
  </nav>
  <div className="flex-1  bg-black">
    <img
      src="https://mdbootstrap.com/img/new/slides/041.jpg"
      className="min-w-full min-h-full"
      alt="..."
    />
  </div>
</div>

Output:

For more information about the flex class refer https://tailwindcss.com/docs/flex