導航+封面全屏

Question

我需要一個屏幕，頂部欄作為菜單，即my-10的ul ，屏幕的其余部分是帶有背景圖像的div 。 他們應該一起覆蓋h-screen 。
我應該給導航什么類，給包含圖像的div什么？

謝謝

Answer 1

您可以通過顯示類型來實現此目的flex 。

對於您的場景：

使用flex flex-col h-screen的父元素內的nav和div然后為nav和div提供以下類

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

試試下面的簡單代碼：

<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>

輸出：

有關flex類的更多信息，請參閱https://tailwindcss.com/docs/flex