屏幕下方页面底部的页脚

Question

我的页脚有问题。当加载页面时，它被加载到页面底部的屏幕底部。 我的页脚是一个简单的 div 和css，他的父母是 body 。

这是我的css代码

.footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #0063bf;
    color: #fff;
    text-align: center;
}

P.S。：我使用bootstrap，如果这个帮助。在bootstrap方面我想要一个navbar-static-bottom，但是bootstrap刚刚修复了底部:(所以我创建了自己的css类。

Answer 1

身体有position:relative吗？如果没有，请尝试添加它。

Answer 2

尝试改变它：

.footer{
    padding: 1rem;
    background-color: #0063bf;
    color: #fff;
    text-align: center;
}

这将它放入文档流程 - 如果它是HTML代码中的最后一个，它将显示为最后一个元素（只要文档流中的其他元素也是ar，并且没有绝对或固定的位置）

Answer 3

您正在将容器外部设置为页脚。如果您想要将其固定在页面底部，这是正确的。

要在页面末尾放置页脚，您需要将页脚放在页面容器中：

<div class="container-fluid">
     <div class='row'>
          <div class='col-md-7 col-md-offset-1'>
                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          </div>
          <div class='col-md-3 col-md-offset-1 content-drp'>
               <center>
                 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
               </center>
          </div>
     </div>
     <div class="footer" style="background:#EEE">
           &copy; <?php echo mdate('%Y');?> Text
     </div>
 </div>

Answer 4

＆＃13;

＆＃13;

   footer{
   width:100%;
    background-color: #0063bf;
    color: #fff;
    text-align: center;
    position:fixed;
    bottom:0;
     height:60px;
  }

＆＃13;

<footer><footer>



 

＆＃13;

＆＃13;

＆＃13;