How to fix footer at the bottom of screen?

Question

I want to fix the footer at the bottom of screen like if the screen height is increase or decrease it comes on the bottom of screen, it never be come shorter then screen height?

HTML

<div class="footer">

<p> <a href="../info/about.php">About </a><a href="../info/help.php">Help </a><a href="../info/terms.php">Terms </a><a href="../info/privacy.php">Privacy </a><a href="../info/advertise.php">Advertise</a><a> - </a>@2016 webste</p>

    </div>

CSS

.footer {
background-color:#fafafa;
 text-align: center;
 height:30px;
 margin-top:10%;
}

.footer p {
color: #3c4a50;
line-height: 25px;
    font-size: 13.3333px;
    font-family: Arial;
}

.footer a {
color: #3c4a50;
text-decoration: none;
    font-size: 13.3333px;
    line-height: normal;
    padding-right:0.5%;
}

.footer a:hover {
color: #252d31;
font-size:95%;
}

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Jishnu V S, Jan 25 '17 at 12:13

score 4 · Answer 1 · answered Jan 25 '17 at 12:10

4

add this css

.footer {
    position: fixed;
    bottom: 0;
}

answered Jan 25 '17 at 12:10

Kiran Shinde

5,732
4
24
41

it overflow on the container – Nakhhhh Jan 25 '17 at 12:14

score 0 · Answer 2 · answered Jan 25 '17 at 12:11

0

Did you try :

.footer {
 background-color:#fafafa;
 text-align: center;
 height:30px;
 position:fixed;
 bottom:0;
 left:0;
 width:100%;
}

answered Jan 25 '17 at 12:11

Murat Doğan

31
7

it overflow on the container – Nakhhhh Jan 25 '17 at 12:14
Can you send me a link on jsfiddle or etc. – Murat Doğan Jan 25 '17 at 12:22
can i send you the whole code of page, html and css – Nakhhhh Jan 25 '17 at 12:24

score 0 · Answer 3 · answered Jan 25 '17 at 12:13

0

JS fiddle link -

https://jsfiddle.net/e1oywpov/

Just add, position: fixed and bottom:0px, then it will remain in the bottom

.footer {
background-color:#fafafa;
 text-align: center;
height:30px;
margin-top:10%;
bottom:0px;
position:fixed
}

answered Jan 25 '17 at 12:13

Ayush Sharma

2,057
15
25

it overflow on the container – Nakhhhh Jan 25 '17 at 12:15
it overflow on the container? Can you elaborate this – Ayush Sharma Jan 25 '17 at 12:53

score 0 · Answer 4 · answered Jan 25 '17 at 12:13

0

you can add following CSS & add z-index also

.footer {
    position: fixed;
    z-index: 1;
    bottom: 0;
}

answered Jan 25 '17 at 12:13

Jagajit Prusty

2,070
2
21
39

it overflow on the container – Nakhhhh Jan 25 '17 at 12:15

How to fix footer at the bottom of screen?

4 Answers4