Question

我有一个靴子页脚，我将其设置为position：absolute，以便它始终位于页面底部（我的页面是单页网站）。

问题：当我调整屏幕宽度的大小并达到〜980px标记时，页脚高度会向上调整高度，以覆盖页面的大部分内容（在我的情况下为登录面板）。这很烦人：应该发生的是它应该向下调整大小，以便用户继续看到登录面板。

可能的非解决方案：我已经尝试了position：relative，但这将使页脚处于页面中间。

 <body style="height:100%;min-height:100%">

 <footer class="page-footer font-small indigo" style="position:absolute;right: 0;bottom: 0;left: 0;">
<div class="container text-center text-md-left">
  <div class="row" id="footer">
    <div class="col-md-3 mx-auto">
      <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Explore</h5>
      <ul class="list-unstyled">
        <li>
          <a href="#!">Link 1</a>
        </li>
        <li>
          <a href="#!">Link 2</a>
        </li>
        <li>
          <a href="#!">Link 3</a>
        </li>
        <li>
          <a href="#!">Link 4</a>
        </li>
      </ul>
    </div>
<div class="col-md-3 mx-auto">
      <h5 class="font-weight-bold text-uppercase mt-3 mb-4">About us</h5>
      <ul class="list-unstyled">
        <li>
          <a href="#!">About us</a>
        </li>
        <li>
          <a href="#!">Trust and safety</a>
        </li>
        <li>
          <a href="#!">Help and support</a>
        </li>
        <li>
          <a href="#!">Contact</a>
        </li>
      </ul>
    </div>

    <div class="col-md-3 mx-auto">
      <h5 class="font-weight-bold text-uppercase mt-3 mb-4">How does it work?</h5>
      <ul class="list-unstyled">
        <li>
          <a href="#!">Link 1</a>
        </li>
        <li>
          <a href="#!">Link 2</a>
        </li>
        <li>
          <a href="#!"></a>
        </li>
        <li>
          <a href="#!"></a>
        </li>
      </ul>
    </div>

    <div class="col-md-3 mx-auto">
      <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
      <ul class="list-unstyled">
        <li>
          <a href="#!">Link 1</a>
        </li>
        <li>
          <a href="#!">Link 2</a>
        </li>
        <li>
          <a href="#!">Link 3</a>
        </li>
        <li>
          <a href="#!">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</footer>

</body>

Answer 1

尝试使用breakpoints。

@media (min-width: 992px){
    .page-footer{
        position:absolute;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

但是您需要从html中删除页脚样式，并创建.css文件以使用此代码（或将其放入<style>标记中）。

Bootstrap Footer调整大小，导致页面内容被覆盖

1 个答案: