如何附加页脚？

Question

我要制作＆＃34;普及＆＃34;页脚到我的网站示例。但我有任何问题：  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>

图像检查：

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>