如何使按钮保持静止并固定在底部
如何使按钮保持静止并固定在底部
提问于 2021-04-28 12:45:39
我正在使用顺风 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>我怎样才能解决这个问题，使按钮固定到底部。
回答 4
Stack Overflow用户
发布于 2021-04-28 13:43:11
用<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: fixedbottom-0代表bottom: 0
Stack Overflow用户
发布于 2021-04-28 13:20:07
在主容器div上使用此css
{
position: fixed;
bottom: 0
}Stack Overflow用户
发布于 2021-04-28 14:46:08
如果您希望将按钮固定在底部，而不是相对于上面的内容，那么您可能需要尝试以下操作。它只是将按钮设置到页面底部，并告诉代码不要担心其他内容。然后，您可以单独更改按钮的其他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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67300514
复制相关文章
相似问题
腾讯云开发者
