Position An Element At Bottom Of The Visible Space While Scrolling On Android Mobile Firefox
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>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style type="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>
<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 class="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>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style type="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>
<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>
</body></html>
Post a Comment for "Position An Element At Bottom Of The Visible Space While Scrolling On Android Mobile Firefox"