HTML / CSS页脚不会坚持在屏幕上调整大小

Question

我有以下尝试，尝试制作一个简单的粘性页脚。

我的问题是页脚没有挨底，我怀疑它可能是一个CSS问题。

如果有人可以提供以下代码进行扫描并提供一些建议，那将非常感激。

    #footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: red;
    position: absolute;
    bottom: 0;
}
  <footer class="footer" id="footer">
     <div class="footLeft" style="width:75%; float:left;">
     </div>
     <div class="footerRight" style="width:25%; float:right; padding:25px;">
        <button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
     </div>
    </footer>

问题我有/输出

Answer 1

将以下规则添加到正文

body {
    min-height:100%;/*or 100vh */
    position:relative;
}

<强>解释

min-height属性将确保正文至少占据视口高度的100％。这样，即使您的内容较少，您的页脚也会始终粘贴在视口的底部。

设置了

Position: relative规则，以便页脚相对于正文绝对定位，而不是任何其他包装

Answer 2

您可以使用此本机类在引导程序中实现粘性页脚 -

<div class="footer navbar-fixed-bottom">

Answer 3

另一种可能性是使用null，而不会影响身体css。 在这种情况下，如果存在滚动条，则页脚将始终位于页面事件的底部

实施例

position:fixed

请参阅fiddle