Tailwind CSS中如何让元素始终处于网页底部？

你当前的问题出在使用了absolute bottom-0的定位方式：

• 绝对定位（absolute）的元素会相对于最近的非静态定位父元素（无对应父元素时则相对于视口）定位，当页面内容高度超过视口时，滚动页面后这个元素会停留在初始视口的底部，而非整个页面内容的最末端。

根据你的需求，分两种场景给出针对性解决方案：

场景1：元素固定在视口底部（始终可见，不随滚动移动） #

将absolute替换为fixed，同时为避免页面底部内容被遮挡，给主内容容器添加对应底部元素高度的内边距：

修改后的底部元素代码：

<div class="space-y-1 w-full fixed bottom-0">
  <div class="bg-white w-full" style="height: 1px"></div>
  <div class="bg-white w-full" style="height: 2px"></div>
  <div class="bg-white w-full" style="height: 3px"></div>
  <div class="flex relative bg-white w-full h-24 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-20 object-contain"></img>
    <p class="absolute left-1/2 -translate-x-1/2 bottom-0 text-xs">Designed by Julian Ordaz</p>
  </div>
</div>

同时给上方文本容器添加底部内边距：

<div class="text-white text-center mx-auto my-2 w-2/3 pb-32">
  <!-- 原文本内容 -->
</div>

场景2：元素位于页面内容的最底部（随页面滚动，仅在页面末尾显示） #

这种场景适合希望底部元素跟随页面内容，仅在滚动到页面最底部时出现的需求，用Flex布局实现“粘性底部”：

1. 给页面根容器（如<body>或包裹所有内容的父容器）添加min-h-screen flex flex-col类，让容器至少占满视口高度并采用垂直Flex布局；
2. 移除底部元素的absolute bottom-0，改为mt-auto，让它自动推到容器底部。

修改后的完整结构示例：

<!-- 根容器 -->
<div class="min-h-screen flex flex-col">
  <!-- 主内容区域 -->
  <div class="text-white text-center mx-auto my-2 w-2/3">
    <p>
      Welcome to "GlamourLocks," where your hair's beauty and style take center
      stage. Nestled in the heart of the city, our chic and contemporary hair
      salon is a sanctuary for those seeking the ultimate in hair care and
      transformation. At GlamourLocks, we understand that your hair is an
      expression of your unique personality, and our team of experienced
      stylists is dedicated to helping you unleash your inner beauty. Whether
      you're looking for a fresh haircut, a bold new color, or a special
      hairstyle for that special occasion, we've got you covered. Our salon is
      not just a place for hair services; it's a space where you can relax,
      rejuvenate, and leave feeling more confident and glamorous than ever
      before. Discover the magic of GlamourLocks, where every strand of hair is
      a work of art, and every client is a VIP.
    </p>
  </div>

  <!-- 底部元素 -->
  <div class="space-y-1 w-full mt-auto">
    <div class="bg-white w-full" style="height: 1px"></div>
    <div class="bg-white w-full" style="height: 2px"></div>
    <div class="bg-white w-full" style="height: 3px"></div>
    <div class="flex relative bg-white w-full h-24 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-20 object-contain"></img>
      <p class="absolute left-1/2 -translate-x-1/2 bottom-0 text-xs">Designed by Julian Ordaz</p>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者jrdaz14