html - CSS - 页脚不会固定在页面底部

Question

我正在将一个前端站点加载到 wordpress 上，在博客页面上，我的页脚不会固定在页面底部/想要向上 float ，所以它最终看起来像这样 -

它在其他页面上没有这样做，但我也注意到在谷歌浏览器上，每一页的页面底部都有一条白色 strip 。我已经通过谷歌寻找解决方案 - 大多数人似乎建议 position: absolute 但我已经尝试过但没有奏效。这是我目前的代码 -

样式.css

footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  width: auto;
  background-color: black;
}

body {
  position: relative;
  margin-bottom: 6rem;

}

footer.php

<!-- footer -->
<footer>
    <div class="container-fluid">
        <div class="row no-gutters">
            <div class="col-md-3">
                 <div id="socialmedia">
                    <a href="#" class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>
                    <a href="#" class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>
                    <a href="#" class="icon-button google-plus"><i class="fa fa-google-plus"></i><span></span></a>
                    <a href="#" class="icon-button instagram"><i class="fa fa-instagram"></i><span></span></a>
                    <a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i><span></span></a>
                </div>
            </div>
            <div class="col-md-6">        
                <div id="email">
                    <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/footer_logo.png" style="width: 150px; height: 50px; margin-bottom: 20px;">  
                    <p>Email: hello@havoccreative.com </br>+971 (0)55 151 0491 or +971 (0)55 282 2114
                    </br>PO Box 769558, twofour54, Abu Dhabi</p>
                    <p>This website was design by us *pause for applause*</br> and built with his bare hands by Michael Whitehead.</br> &copy Havoc Creative 2017</p>
                </div>
            </div>    
        </div>        
    </div>  
</footer>       
<!-- /footer -->

感谢任何帮助。

Answer 1

Flexbox 可以帮到你! =) 从页脚中删除绝对位置并尝试此解决方案:

第 1 步:将此添加到您的 body 元素:

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

第 2 步:将此添加到您的页脚:

footer {
   margin-top: auto;
}

您也可以查看this article了解更多创建粘性页脚的方法。