Question

我是HTML / CSS初学者，无法解决问题。我的问题是，当我放大页脚时会跟随我。

顺便说一句，我正在使用引导程序4

html{
    position: relative;
    min-height: 100%;
}

.Footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px;
    background-color: #f5f5f5;
}
<footer class="Footer">

  <div class="container-fluid">

    <div class="col">

      <!-- Les lanngues (Footer) -->
      <div class="col-lg-3 col-xs-2">

      <a href="#">EN</a>
      <a href="#">GER</a>
      <a href="#">FR</a>

      </div>

    </div>
    <div class="col">
      <!-- L'adresse E-mail (Footer) -->
      <div class="col-lg-5 col-xs-5" id="EmailFooter">
        <span class="">E-mail : <a href="#">asdpawd@bluewin.ch</a></span>
      </div>

      <div class="col">
        <!-- Telephone (Footer) -->
        <div class="col-lg-3 col-xs-6">
          <span  id="Tel-Footer" >Tél : xxxxx</span>
        </div>
      </div>
    </div>
 </footer>

未放大：https://prntscr.com/pi19m7

放大：https://prntscr.com/pi19v3

当我放大时，它停在按钮上

Answer 1

欢迎来到我们的社区。最好使用felx-box而不是绝对的。

html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}


/* Other Classes for Page Styling */

body {
  background: #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-black">Sticky Footer using Flexbox</h1>
        </div>
      </div>
    </div>
  </div>
  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy;</small>
    </div>
  </footer>
</body>

我的页脚不停留在网页的底部

1 个答案: