Как установить нижний колонтитул внизу экрана?

Question

Я хочу исправить нижний колонтитул внизу экрана, как если бы высота экрана увеличивалась или уменьшалась в нижней части экрана, она никогда не уменьшалась, чем высота экрана?

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

Answer 1

добавить CSS

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

Answer 2

ли вы попробовать:

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

Answer 3

JS скрипку ссылка -

https://jsfiddle.net/e1oywpov/

Просто добавьте, позиция: фиксированная и снизу: 0px, то он будет оставаться в нижней

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

Answer 4

вы можете добавить следующие CSS & надстройку z-index также

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