如何使用 Tailwind CSS 使 div 元素始终适合网页底部？

Question

我希望以下 div 元素始终适合我的网页底部（即它充当我的页面的页脚）。目前，它位于底部附近，但我的元素和网页底部之间仍然有一个黑色空间，我想将其删除 - 我也愿意接受有关我的样式或结构的任何其他评论。谢谢你。

    <div class="flex flex-col space-y-1 items-end relative bottom-0 w-full">
      <div class="bg-white w-full" style="height: 1px">&nbsp;</div>
      <div class="bg-white w-full" style="height: 2px">&nbsp;</div>
      <div class="bg-white w-full" style="height: 3px">&nbsp;</div>
      <div class="flex relative bg-white w-full h-20 items-center justify-center">
        <img src="../img/logo.png" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-24"></img>
      </div>
    </div>

我尝试过使用 Tailwind CSS 进行相对和绝对定位 - 但我对这些类不太熟悉，所以我认为这可能是问题的一部分。

Answer 1

使用

.absolute

将元素定位在文档正常流之外，导致相邻元素表现得就像该元素不存在一样。

https://v1.tailwindcss.com/docs/position

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col space-y-1 items-end absolute bottom-0 w-full">
  <div class="bg-white w-full" style="height: 1px">&nbsp;</div>
  <div class="bg-white w-full" style="height: 2px">&nbsp;</div>
  <div class="bg-white w-full" style="height: 3px">&nbsp;</div>
  <div class="flex relative bg-white w-full h-20 items-center justify-center">
    <img src="https://placehold.co/600x400" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-24"></img>
  </div>
</div>