javascript - How to make button static and fixed at bottom - Stack Overflow

admin管理员组

文章数量:1323330

I am working with tailwind CSS and making a page where it uses Next and Back buttons to navigate between pages. But the problem is when the content is less on the page the button sticks to the top You can see this image for more reference.

Image link:-

This is the code used for Buttons

<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>

How can I fix this so that button bees fixed to the bottom.

I am working with tailwind CSS and making a page where it uses Next and Back buttons to navigate between pages. But the problem is when the content is less on the page the button sticks to the top You can see this image for more reference.

Image link:- https://ibb.co/pw5QN2N

This is the code used for Buttons

<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>

How can I fix this so that button bees fixed to the bottom.

• javascript
• html
• css
• typescript
• tailwind-css

Share Follow asked Apr 28, 2021 at 12:45 Tushar Gaurabh jha Tushar Gaurabh jha 59333 gold badges66 silver badges1111 bronze badges 1

• Hi, Can you create a codepen or fiddle for this? – Yash Maheshwari Commented Apr 28, 2021 at 13:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Wrap those buttons with <div> tag and add classes fixed bottom-0 w-full to that <div> tag.

Example:

<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 is for width: 100%
• fixed is for position: fixed
• bottom-0 is for bottom: 0

use this css on the main container div

{
  position: fixed;
  bottom: 0
}

<link href="https://unpkg.//[email protected]/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./WY4qZvba15

If you want your buttons to be fixed to the bottom and not relative to the content above, then you might want to try this. It just sets the buttons to the bottom of the page and tells the code not to worry about the other content. You can then change the other CSS of the buttons (ie, how far left or right, or the color) individually.

.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>

本文标签： javascriptHow to make button static and fixed at bottomStack Overflow