位于底部固定位置的div 出网页

Question

我正在尝试创建一个始终位于底部且具有粘性（固定）的按钮。

<div class="bg-red-200 fixed bottom-0 w-full">

但是，问题是 div 不是 100% 宽度，而是完全超出了网页，我该如何解决？

https://play.tailwindcss.com/7hDCAKujYQ

Answer 1

可能是您的 html 结构未根据需要的行为进行调整。如果你 div 的按钮在 flex div 之外，你可以实现这个：

  <div class="flex flex-col w-96 relative">
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
  </div>
  <div class="bg-red-200 fixed bottom-0 w-full">
    <button class="my-4 flex w-full justify-center rounded-md border border-blue-400 bg-blue-400 p-2 font-semibold text-white">Go button</button>
  </div>

您可以在这里查看结果：https://play.tailwindcss.com/71sRPrhRAE

Answer 2

您可以将 left-0 添加到 div，它会起作用。如下图link

<div class="bg-red-200 fixed left-0 bottom-0 w-full">

编辑：

在这种情况下，您需要将位置 absolute 添加到您的按钮的 div。

因为position: fixed会相对于屏幕添加它。

<div class="bg-red-200 absolute w-full bottom-0 left-0">

https://play.tailwindcss.com/71sRPrhRAE

编辑 2：

你应该将 w-96 class 添加到你的按钮 div。因为它已添加到父 div https://play.tailwindcss.com/7hDCAKujYQ

Answer 3

您可以使用 sticky 和 bottom-0 作为 button 的父 div 看看 here

<script src="https://cdn.tailwindcss.com"></script>

<div class="mx-auto flex h-max min-h-full w-full max-w-6xl">
  <div class="hidden sm:flex bg-red-400 w-1/3">left sidebar</div>
  <div class="flex relative flex-col w-96 space-y-4 ">
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content</div>
    <div class="mx-auto h-40 w-40 rounded-lg bg-black/10 backdrop-blur-sm">content last</div>
    
    <div class="sticky bottom-0  w-full bg-red-200">
      <button class="my-4 flex w-full justify-center rounded-md border border-blue-400 bg-blue-400 p-2 font-semibold text-white">Go Button</button>
    </div>
  
    </div>
  <div class="hidden lg:flex w-1/3 bg-green-400">right sidebar</div>
</div>

位于底部固定位置的div 出网页

div that is in fixed position at the bottom goes outside webpage

html

css

flexbox

tailwind-css