position div on bottom of document, not viewport

Question

I want to position a div at the bottom of the document, but it is only going to the bottom of the viewport. How can I do this with CSS only? I tried position: absolute; bottom: 0; but that only puts it at the bottom of the viewport. Thanks for any help.

You don't have to position it for it to be at the end of the document. Just put the div at the end of the document in the markup. — ray, Feb 02 '22 at 23:10

Yong · Answer 1 · 2022-02-02T23:12:19.663

-1

Use position: relative; on the parent container where you're gonna use the position: absolute;. See the snippet below:

.wrapper {
  height: 150vh;
  position: relative;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: blue;
}

<div class="wrapper">
  <footer>Footer</footer>
</div>

More on positions here.

edited Feb 02 '22 at 23:12

answered Feb 02 '22 at 23:01

Yong

1,622
1
4
29

I do not want the footer to be fixed, just something at the end of the document. – stonefish Feb 02 '22 at 23:03
I've edited the snippet, check it if it's the behavior you are looking for. – Yong Feb 02 '22 at 23:06

position div on bottom of document, not viewport

1 Answers1