时间戳

首页 > 解决方案 > 引导页脚调整大小导致页面内容被覆盖

html - 引导页脚调整大小导致页面内容被覆盖

问题描述

我有一个引导页脚，我将其设置为 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>

标签： htmlcssresizebootstrap-4footer

解决方案

尝试使用断点。

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

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

推荐阅读