フッターの取り付け方法は？

Question

私は、Webサイトの私の例に「普遍的な」フッターを作成します。しかし、私はすべての問題を持っている：ページが短い場合 は1 - ページが長い場合、フッターは 2を動作しません - フッタの仕事

フッターの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; 
} 

フッターのHTML：

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

画像の

Examlpes：

Answer 1

これを試してください：あなたはページの下部に滞在することを強制するために、.footerセクションにposition:fixedプラスbottom:0ルールを割り当てることができます

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

Answer 2

。

あなたは

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