how to always set my footer in the bottom is it possible with css only

Question

I have a div class .footer which is my website's footer till now I do not have any content on my webpage so it is on the top of my page after my navigation. please tell some CSS so I can make my footer at the bottom of my page.

Gautam Naik · Accepted Answer · 2018-05-14T08:18:01.127

1

Using position:fixed on footer and setting bottom:0 will position ur footer at the bottom of screen

More about CSS positions here

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: red;
}

<footer>
  some content
</footer>

edited May 14 '18 at 08:18

answered May 14 '18 at 08:15

Gautam Naik

8,990
3
27
42

score 1 · Answer 2 · answered May 14 '18 at 08:16

1

This is the code I used in order to do that:

#footer{
  position: absolute;
  height: 75px;
  bottom: 0;
}

answered May 14 '18 at 08:16

Jordy

320
2
15

Atul Sharma · Answer 3 · 2018-05-14T08:19:07.460

0

Use

position: fixed;
bottom: 0;

position: fixed; will get the position fixed while scrolling & bottom:0 will keep the element at bottom of window.

    .footer{
        position: fixed;
        bottom: 0;
        width:100%;
        height:40px;
        background-color:red;
    }
    
    .header{
        width:100%;
        height:40px;
        background-color:green;
    }

<div class="header">
       Header
</div>

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

edited May 14 '18 at 08:19

answered May 14 '18 at 08:15

Atul Sharma

9,397
10
38
65

thanks but if i fix the position it will always remains on the same place. – Sumit Kumar May 14 '18 at 08:19
It will always remain at bottom.. and inner content will scroll. – Atul Sharma May 14 '18 at 08:20
You can use flexbox for that. Check out this sample snippet I created to see how that can work: https://jsfiddle.net/stephenasamoah/e4v6g1p7/3/ – Asamoah May 14 '18 at 08:37

how to always set my footer in the bottom is it possible with css only

3 Answers3