css 页脚未停留在网页底部

bvhaajcl 于 2022-12-20 发布在其他

关注(0)|答案(3)|浏览(189)

我是一个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
当我放大的时候，它刚好停在按钮上

css

来源：https://stackoverflow.com/questions/58345504/my-footer-doesnt-stay-at-the-bottom-of-my-webpage

3条答案

按热度按时间

ac1kyiln1#

欢迎来到我们的社区。使用费克斯盒子比绝对的好。

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>

赞(0）回复(0）举报 2022-12-20

0md85ypi2#

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

赞(0）回复(0）举报 2022-12-20

qxgroojn3#

我认为那个位置：绝对是这里的问题。尝试删除它，然后运行它。有时工作的位置可能有点棘手，所以尝试克服它，然后应用您的页脚，看看结果。

赞(0）回复(0）举报 2022-12-20