Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Mobile

Position An Element At Bottom Of The Visible Space While Scrolling On Android Mobile Firefox

Post a Comment
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:

Solution 1:

The body element has has the position property set to absolute, which gives it a margin of 8px. This gives the page a trailing space, along with the fact that the body has a fixed height, which the footer itself tries to stick to.

Answer : Remove all of the CSS from the body element, it's unnecessary and a bad practice. If your page is too short, give it a min-height property of 100%.

Solution 2:

Try this.

<html><head><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=yes"><styletype="text/css">body {
    margin:0px; 
  }
  .main {
    width:20%;
    overflow: auto;
    padding-bottom: 18px; /* height of the fixed div at bottom */background-color:red;
  }
  .bottom {
    position: fixed;
    bottom: 0px;
    width: 20%;
    background-color:green;
  }
  </style></head><body><divclass="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
    <divclass="bottom">bottom</div></div></body></html>

Solution 3:

Try this code i didnt use javascript and i think it will work fine using this css code:

<html><head><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=yes"><styletype="text/css">body{
    position: relative;
    width:100%;
    height:2000px;
  }
  .main{
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
    height: 800px;
    width:20%;
    overflow: scroll;
    background-color:red;
  }
  .bottom{
    z-index:1;
    position: fixed;
    bottom:0;
    background-color:green;
  }
  </style></head><body><divclass="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><divclass="bottom">bottom</div></body></html>

Codepen https://codepen.io/ahamdan/pen/VwjeJWw

Post a Comment for "Position An Element At Bottom Of The Visible Space While Scrolling On Android Mobile Firefox"