CODEWITHSUNDEEP
javascripthtmlcssfootersticky-footer
Nakhhhh
Nakhhhh

Reputation: 305

How to fix footer at the bottom of screen?

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%;
}

Upvotes: 1

Views: 2765

Answers (4)

Jagajit Prusty
Jagajit Prusty

Reputation: 2110

you can add following CSS & add z-index also

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

Upvotes: 0

Ayush Sharma
Ayush Sharma

Reputation: 2107

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
}

Upvotes: 0

Murat Doğan
Murat Doğan

Reputation: 31

Did you try : 

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

Upvotes: 0

Kiran Shinde
Kiran Shinde

Reputation: 5982

add this css

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

Upvotes: 4

Related Questions