Altbilgi nasıl eklenir?

Question

Web sitesi örneğime "evrensel" altbilgi yapıyorum. Ama herhangi bir sorun vardır: sayfa kısa olduğunda 1. - sayfa uzunluğunda olduğunda altbilgi 2. çalışmıyor - altbilgi çalışma

altbilgisi'nın CSS:

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

altbilgisi'nın HTML:

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

görüntülerin

Examlpes:

Answer 1

bu deneyin: sayfanın altındaki kalmak zorlamak için, .footer bölüme position:fixed artı bottom:0 kuralları atayabilirsiniz

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

Answer 2

.

Sen

*{ 
 
    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>