页面底部的页脚而不是屏幕答案

【问题标题】：Footer at bottom of page insted of screen页面底部的页脚而不是屏幕
【发布时间】：2016-10-10 07:16:26
【问题描述】：

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

这是我的css代码

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

P.S.：如果有帮助，我使用引导程序。在引导方面，我想要一个导航栏静态底部，但引导只是固定底部:(所以我创建了自己的 css 类。

【问题讨论】：

能否请您发布您的html 页面，以便我能帮助您？这可以通过引导程序完成，无需更改或使用任何 css。
发布所有的 CSS 文件
我使用 CodeIgniter 并且在 priview 中有一些错误codepen.io/anon/pen/vXRWqq
我看过你的笔，我已经发布了一个答案，解释了为什么它没有按照你的意愿工作。

标签： html css twitter-bootstrap-3 footer

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试像这样改变它：

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

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

【讨论】：

现在页脚在底部，但如果页面太短，它会出现在上面，并在页脚下保持空白直到底部。 i.imgur.com/4boSsuK.png
这里是个人 css 和 html codepen.io/anon/pen/vXRWqq 但是我使用 CodeIgniter 并且在预览中有一些错误。

【解决方案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>

【讨论】：

【解决方案4】：

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

<footer><footer>

【讨论】：