我的页脚没有留在网页底部

Question

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

顺便说一下，我使用的是 bootstrap 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 比使用 absolute 更好。

 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>

Answer 2

将位置设置为绝对可能是问题所在。 此属性不会对放大做出响应，并且无论其他元素如何移动都将保持在同一位置。 尝试删除“位置：绝对；” 如果您希望页脚与上面的内容隔开，则可以给页脚一个顶部边距。

Answer 3

我认为 position: absolute 是这里的问题。 尝试删除它，然后运行它。 有时使用位置也可能有点棘手，因此请尝试克服它，然后应用页脚并查看结果。

我的页脚没有留在网页底部

问题描述

3 个解决方案

解决方案1
0 2019-10-11 17:08:48

解决方案2
0 2022-12-18 05:26:21

解决方案3
0 2022-12-18 05:35:02

我的页脚没有留在网页底部

问题描述

3 个解决方案

解决方案1 0 2019-10-11 17:08:48

解决方案2 0 2022-12-18 05:26:21

解决方案3 0 2022-12-18 05:35:02

解决方案1
0 2019-10-11 17:08:48

解决方案2
0 2022-12-18 05:26:21

解决方案3
0 2022-12-18 05:35:02