Как подключить нижний колонтитул?

Question

Я собираюсь сделать «универсальный» нижний колонтитул на моем примере веб-сайта. Но у меня есть какие-то проблемы: 1. Когда страница коротка - сноска не работает 2. Если страница долго - сноска работа

CSS FOOTER в:

.footer { 
    text-align: center; 
    position: relative; 
    bottom: 0px; 
    margin-bottom: -50px; 
    margin-left: -50px; 
    margin-right: -50px; 
    width: 110%; 
    height: 70px; 
    background-color: #FF9100; 
    font-size: 20px; 
} 

HTML FOOTER в:

<div class="footer"> 
     <p>&copy;All rights reserved</p> 
</div> 

Examlpes изображений:

Answer 1

Попробуйте это:

.footer { 
    text-align: center; 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    height: 70px; 
    background-color: #FF9100; 
    font-size: 20px; 
} 

Answer 2

Вы можете назначить position:fixed плюс bottom:0 правила раздела .footer, чтобы заставить его остаться в нижней части страницы.

Вы можете увидеть очень простой пример кода ниже

*{ 
 
    box-sizing:border-box; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
main{ 
 
    background:url('http://lorempixel.com/1200/1200/nature'); 
 
    background-size:cover; 
 
    background-position:center center; 
 
    color:#fff; 
 
    text-align:center; 
 
    height:100vh; 
 
} 
 

 
footer{ 
 
    position:fixed; 
 
    bottom:0; 
 
}

<main> 
 
    <h1>Example page</h1> 
 
    <footer> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias quos, soluta. Ut dolorum officia illum molestias quia commodi tempora cupiditate, earum deleniti amet sequi deserunt tempore, perferendis harum doloremque.</p> 
 
    </footer> 
 
</main>