为啥页脚在顺风 css 中浮动

Posted 2023-03-07

【中文标题】为啥页脚在顺风 css 中浮动

【英文标题】：Why Footer is floating in tailwind css为什么页脚在顺风 css 中浮动

【发布时间】：2021-08-24 06:07:21

【问题描述】：

我在 NextJS 项目中使用了 tailwind CSS 页脚。我正在显示获取的数据。仅当数据较少时，页脚才会浮动。我在我的页面中创建了一个页脚文件并将其导入到我的_app.js 文件中。我尝试了绝对和固定位置。但它不起作用。如何将页脚保持在底部？

<div className="relative mt-16 bg-gray-900">
  <div className="px-4 pt-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
    <div className="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
      <p className="text-base text-white-100">
        © Copyright 2020. All rights reserved.
      </p>
      <ul className="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
        <li>
          <Link href="/Privacy">
          <a className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                    Privacy Policy
                  </a>
          </Link>
        </li>
        <li>
          <a href="https://twitter.com/" target="_blank" rel="noreferrer noopener" className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                  Contact
                </a>
        </li>
      </ul>
    </div>
  </div>
</div>

【参考方案1】：

您可以根据100vh 减去页脚到主要内容容器的高度来设置最小高度。

<main class="min-h-[calc(100vh-210px)]">Main Content</main>
<footer class="h-[210px] bg-gray-900">
    <!-- Your footer content -->
</footer>

试试TailwindCSS playground。