Position the div at the bottom

Question

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

Answer 1

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