-1

I want to put a footer at the bottom of the page, which has quite large amount of data, but the footer should be over the content at the top layer:

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">                         

  <style type="text/css">
  .main{
    height: 1430px;
    background-color:red;
  }
  .bottom{
    position: absolute;
    bottom: 0px;
    background-color:green;
  }
  </style>
</head>
<body>
  <div class="main">main content
    <br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3
  </div>
<div class="bottom">bottom</div>

Now my problem is, that if I scroll the page, the bottom keeps on its position where it was generated.

How do I keep it at the bottom with only CSS?

rubo77
  • 19,527
  • 31
  • 134
  • 226
  • that answer does not solve the issue: https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b – rubo77 Oct 06 '20 at 23:27
  • that is not an answer but a question having 29 answers (in addition to two other duplicates having more answers). Worth to note that the answer you accepted below is within the duplicate – Temani Afif Oct 06 '20 at 23:40
  • I accepted this answer now and asked a new question, which is only about android Firefox, which is my main problem. – rubo77 Oct 06 '20 at 23:43
  • please delete this question, I asked a new clearer question here: https://stackoverflow.com/questions/64235179/position-an-element-at-bottom-of-the-visible-space-while-scrolling-on-android-mo – rubo77 Oct 06 '20 at 23:44
  • remove the accepted mark and your upvote to delete it now or wait for 2 days – Temani Afif Oct 06 '20 at 23:48
  • I didn't upvote the answer. And I still cannot delete this – rubo77 Oct 07 '20 at 00:14
  • 1
    so you have to wait 2 days or simply don't do anything .. there is nothing wrong to have a duplicate question – Temani Afif Oct 07 '20 at 00:15

1 Answers1

3

Simply use position: fixed in conjunction with your bottom: 0:

.main {
  height: 1430px;
  background-color: red;
}

.bottom {
  position: fixed;
  bottom: 0px;
  background-color: green;
}
<div class="main">main content <br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3</div>

<div class="bottom">bottom</div>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71