元素不会占用剩余高度

问题描述 投票：0回答：2
html css flexbox tailwind-css
2个回答
0
投票

正如您在问题中提到的，您已经通过使用

flexbox
达到了您的要求。如果您仍在寻找替代解决方案，您可以使用 
table
和 
table-rows
tbh 我个人会选择 
flexbox
，我认为我的解决方案不比 
flexbox
更多的 css-y。

这里是使用

table
的例子：

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

0
投票

<nav>
的高度为 58px，包括内边距和边框，因此您可以在 
calc
上使用 
div#undermain
和最小高度。这里的关键值是
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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.