How can I force my footer to stick to the bottom of any page in CSS?

前端未结

关注

 10  1032

This is my code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

I\'ve no idea what is wrong with

相关标签:

10条回答

北荒

2020-12-16 11:29
This is what I did and it caused my footer to stay at the bottom.
```
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
悲哀的现实

2020-12-16 11:29
I struggled to find a solution, as none of the suggested achieved what I wanted:
- If there is to less content, stay at the bottom of the page, not in the middle.
- If there is enough content, do not be stick and overlap the content, just stay at the bottom.
- Hide it from the first sight, so only if the user scrolls down the footer is seen.
This is what worked for me:

html:
```
<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>
```
css:
```
body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}
```
Here in action.
0 讨论(0)
发布评论:

提交评论
- 加载中...

無奈伤痛

2020-12-16 11:30

Why not with jquery?

Put a wrapper div between header and footer and assign min-height property for wrapper with jquery equal with the difference between document height and (header height + footer height).

<script type="text/javascript">
$(document).ready(function(){
 var dh = $(document).height(); //document height here
 var hh = $('header').height(); //header height
 var fh = $('footer').height(); //footer height
 var wh = Number(dh - hh - fh); //this is the height for the wrapper
 $('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>

0 讨论(0)

温柔的废话

2020-12-16 11:32

.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

this is also working for me....

0 讨论(0)

上一页 1 2