色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

元素贏了& # 39；不要占據剩余的高度

CSS
呂致盈1年前10瀏覽0評論

我試圖讓main和div#undermain占據布局的剩余高度，但他們不會這樣做。下面是HTML(使用Tailwind實用程序類):

<body>
  <div class="min-h-screen w-screen overflow-auto bg-black">
    <nav
      class="flex w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pr-6 pl-3"
    >
      <img src="./someurl.svg" />
      <h1 class="text-2xl text-green-500">Delivert</h1>
    </nav>
    <main class="h-full w-full">
      <div id="undermain" class="flex h-full w-full items-center justify-center">
        <button class="bg-green-500">
          sign in
        </button>
      </div>
    </main>
  </div>
</body>

我知道flexbox是解決這種問題的簡單方法，但是我嘗試過的唯一有效的方法是:

給出最高的div(主體正下方的一個)顯示:flex和flex-direction: column 給主flex-grow: 1和display: flex 移除高度:從#undermain開始100% 但是我感覺這個解決方案很奇怪，不像CSS-y。

這里有一個沙箱。

正如你在問題中提到的，你已經通過使用flexbox達到了你的要求。如果你還在尋找替代方案，你可以使用表格和表格行，我個人會選擇flexbox，我認為我的方案并不比flexbox更css-y。

以下是使用表格的示例:

<script src="https://cdn.tailwindcss.com"></script>
<body>
  <div class="table min-h-screen w-screen overflow-auto bg-black">
    <nav class="flex h-10 w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pl-3 pr-6">
      <img src="./someurl.svg" />
      <h1 class="text-2xl text-green-500">Delivert</h1>
    </nav>
    <main class="relative table-row h-full w-full">
      <div id="undermain" class="table-cell h-full w-full">
        <button class="bg-green-500">sign in</button>
      </div>
    </main>
  </div>
</body>

& ltnav & gt高度為58px，包括填充和邊框，因此您可以在div#undermain上使用calc和minimum-height。這里的鍵值是min-h-[calc(100vh-58px)]。

<div class="min-h-screen w-screen overflow-auto bg-black">
  <nav class="flex w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pl-3 pr-6">
    <img src="./someurl.svg" />
    <h1 class="text-2xl text-green-500">Delivert</h1>
  </nav>
  <main class="w-full">
    <div id="undermain" class="flex min-h-[calc(100vh-58px)] w-full items-center justify-center">
      <button class="bg-green-500">sign in</button>
    </div>
  </main>
</div>

https://play.tailwindcss.com/KEIQnQSERc

我舉個基本的例子。推開父flex元素。 P.S .我建議你在使用tailwindcss之前，先試著了解一下簡單css的工作原理。謹向??.致意

* {
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main,
main > div {
  display: flex;
  flex-direction: column;
  flex: auto;
}

button {
  margin: auto;
}

<nav>
  <h1>Delivert</h1>
</nav>
<main>
  <div>
    <button>sign in</button>
  </div>
</main>