如何使按钮静态并固定在底部

Posted 2023-03-07

【中文标题】如何使按钮静态并固定在底部

【英文标题】：How to make button static and fixed at bottom

【发布时间】：2021-07-21 19:50:29

【问题描述】：

我正在使用 tailwind CSS 并制作一个页面，它使用 Next 和 Back 按钮在页面之间导航。但问题是当页面上的内容较少时，按钮会粘在顶部您可以查看此图像以获取更多参考。

图片链接：- https://ibb.co/pw5QN2N

这是用于按钮的代码

<div className="flex justify-between">
            <NavLink to="/course/" + courseName + "/" + (+moduleID - 1)>
              <button
                      className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
                    >
                      Back
                </button>
            </NavLink>
            courseContent[courseName][+moduleID - 1].quiz === true ? (
              <NavLink to="/course/" + courseName + "/" + +moduleID + "/quiz">
                <button
                      className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
                    >
                      Next (Quiz)
                </button>
              </NavLink>
            ) : (
              <NavLink to="/course/" + courseName + "/" + (+moduleID + 1)>
                <button
                      className="my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none"
                    >
                      Next
                </button>
              </NavLink>
            )
            </div>

如何解决这个问题，使按钮固定在底部。

【问题讨论】：

嗨，你能为此创建一个 codepen 或 fiddle 吗？

【参考方案1】：

在主容器 div 上使用这个 css

  position: fixed;
  bottom: 0

【参考方案2】：

用<div> 标记包装这些按钮并将fixed bottom-0 w-full 类添加到<div> 标记。

例子：

<div class='fixed bottom-0 w-full'>
    <button class='my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Back</button>
    <button class='my-8 ml-auto px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Next(Quiz)</button>
    <button class='bottom-0 my-8 float-right px-5 py-2 bg-red-500 text-white text-sm font-bold tracking-wide rounded-full focus:outline-none'>Next</button>
</div>

w-full 代表width: 100% fixed 代表position: fixed bottom-0 代表 bottom: 0

【讨论】：

这可行，但对于其他有足够内容的页面，按钮会粘在底部ibb.co/3z6zMMM

那你应该用js来做这个。我认为不能只使用任何 css

【参考方案3】：

如果您希望按钮固定在底部而不是相对于上面的内容，那么您可能想试试这个。它只是将按钮设置到页面底部并告诉代码不要担心其他内容。然后，您可以单独更改按钮的其他 CSS（即，向左或向右多远，或颜色）。

.b 
  position: absolute;
  bottom: 10px;


.next 
  right: 50px;


.back 
  left: 50px;

<div>
<!--  you can still have your container -->
<div>content up here, buttons below</div>
<!-- you can still have your content -->
<button class="b next">next</button>
<!-- and your buttons will stick to the bottom -->
<button class="b back">back</button>
</div>

【参考方案4】：

<link href="https://unpkg.com//tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex flex-col justify-between min-h-screen p-5">
  <div>
    <h1 class="text-3xl font-bold">Cyber security</h1>
    <h1 class="mt-5 text-2xl font-medium text-blue-500">Basic Terms</h1>
    <p>Cybersecurity 101...</p>
  </div>

  <div class="flex justify-between">
    <button class="px-5 py-2 text-sm font-bold tracking-wide text-white bg-red-500 rounded-full focus:outline-none">Back</button>
    <button class="px-5 py-2 text-sm font-bold tracking-wide text-white bg-red-500 rounded-full focus:outline-none">Next</button>
  </div>
</div>

https://play.tailwindcss.com/WY4qZvba15