css Question posted in
Some basic documentation can be found here.

Css – Position the div at the bottom

I want to fix this div at the bottom of my webpage, here is my react code:
It’s written in tailwind css but you can answer in normal css too

I’ve tried using bottom property but it didn’t work

<div className="flex flex-wrap justify-center p-4 bottom-8"/>

Tags:

2

Answers


  1. 0

    To fix a <div> at the bottom of the page, we can use Tailwind’s positioning utilities correctly. The bottom-8 class alone won’t work unless it is set the element’s position. we can resolve it using following code

    <div className="fixed bottom-0 left-0 right-0 flex flex-wrap justify-center p-4">
  FIXED BOTTOM
</div>

    refer the offical documentation https://tailwindcss.com/docs/position to learn more about Position Utilities

    Login or Signup to reply.
  2. 0

    I’ll offer a normal CSS answer: If you want the div to "stick" to the bottom of the page (so that it’s always visible as you scroll), use

    .myDiv {
    position: fixed;
    bottom: 0;
}

    If you want the div to be at the actual bottom of the page, there’s many ways to do it. My thought process:

    1. Ensure that you have a "container" div which has an appropriate height and width to occupy the whole web page.
    2. Ensure that your "footer" div is a child of this container.
    3. Depending on the display attribute of the parent, you can give an attribute to the footer that will push it to the bottom of the parent div. (For example, if the parent has display: flex, then you can give the parent justify-content: space-between and flex-direction: column; this will arrange the children in a column, and space them out evenly, sending the last child to the bottom of the page.)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search