Question

我将前端网站加载到wordpress上，在博客页面上，我的页脚不会保持固定在页面底部/想要向上浮动，所以最终看起来像这样 - < / p>

它并没有在其他页面上进行，但我也注意到在Google Chrome上，页面底部的每个页面上都有一个白色条带。我通过谷歌寻找解决方案 - 多数似乎建议position: absolute，但我已经尝试过，但它没有奏效。这是我目前的代码 -

的style.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 {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

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

footer {
   margin-top: auto;
}

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

Answer 2

将position的{{1}}更改为footer并删除fixed和top: 0应该可以解决问题。

right: 0

Answer 3

我认为您的问题在于，您通过设置6rem的边距为body {}保留了页脚空间，但没有为页脚设置任何偏移，例如{{1} }。

不要忘记 - 通常一切都在“内部”top: 6rem;内，例如，如此：

body {}

所以，再一次，要获得你想要的效果，你还必须偏移页脚位置，否则你只是“整理”整个事物。因此，您需要做的是将 style.css 修改为：

<body>
   <header></header>
   <article>
      <left_column></left_column>
      <right_column></right_column>
   </article>
   <footer></footer>
</body>

另一种方法是使用footer { position: fixed; top: 6rem; left: 0; right: 0; bottom: 0; height: auto; width: auto; background-color: black; } body { position: relative; margin-bottom: 6rem; }代替padding-bottom - 这样margin-bottom会填满屏幕高度并为body留出空间，但是，你会必须将footer更改为其他内容。

CSS - 页脚无法保持固定在页面底部

3 个答案: