页脚始终位于底部但不固定答案

【问题标题】：Footer to be always at bottom but not fixed页脚始终位于底部但不固定
【发布时间】：2020-12-05 15:07:38
【问题描述】：

如何让引导页脚始终位于底部但不固定？

例如在下面的代码中，页脚应该在底部。（页脚后的空白应在页脚前）。这可以通过使用sticky-bottom来实现，但是当内容比较多的时候（页面会滚动的时候），会固定到最后不会显示出来。

如何实现？

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>VN Parcel</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

</head>

<body>


  <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar">
    <a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" alt="'.$title.'" title="'.$title.'" width="30" height="30" loading="lazy" />&nbsp;'.$title.'</a>

    <ul class="navbar-nav self-first-ul">
      '.$website_slogan.'
    </ul>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav ml-auto self-second-ul">
        <li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
        <li class="nav-item"><a class="nav-link" href="mailto:'.$website_email.'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
        <li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile.'"><i class="fas fa-mobile-alt"></i> '.$website_mobile.'</a></li>
      </ul>
    </div>
  </nav>




  <div class="container p-3 bg-white rounded">


    <div class="row">
      <label for="Number">Track your parcel here <i class="far fa-hand-point-down far-blink"></i></label>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
        <div class="input-group-append">
          <input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
        </div>
      </div>
    </div>


  </div>





  <footer class="footer">
    <nav class="navbar bottom navbar-expand-lg navbar-light bg-light self-navbar">
      <a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" alt="'.$title.'" title="'.$title.'" width="30" height="30" loading="lazy" />&nbsp;'.$title.'</a>

      <ul class="navbar-nav self-first-ul">
        '.$website_slogan.'
      </ul>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav ml-auto self-second-ul">
          <li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
          <li class="nav-item"><a class="nav-link" href="mailto:'.$website_email.'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
          <li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile.'"><i class="fas fa-mobile-alt"></i> '.$website_mobile.'</a></li>
        </ul>
      </div>
    </nav>
  </footer>

</body>

</html>

【问题讨论】：

这样的？ jsfiddle.net/8wLbsk3q
@dave 相当，但不完全。我认为您可以修复底部填充问题并将其作为答案发布jsfiddle.net/u5w4j2vn
是的，我遇到了同样的问题，我发现的唯一方法是在 body 中设置 min-height。我不知道这是否是最好的解决方案，但它确实有效。
@dave 当页脚很大并且容器有更多文本时，它不会滚动。 jsfiddle.net/mepfq8cd/1
可能是这样的吗？ jsfiddle.net/y72L69n1。否则，您需要知道页脚有多大，并将 body padding-bottom 设置为该数字，以便绝对定位的页脚不会阻塞东西

标签： javascript css twitter-bootstrap bootstrap-4 footer

【解决方案1】：

你的问题是你的页脚在你的身体底部，但你的身体比你的页面小

您应该使用此 css 示例为您的身体添加一个最小高度

body {
  min-height: 100vh;
  position: relative;
}
.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

【讨论】：

确实，你得把你的页脚的位置设置在底部，我编辑了我的帖子
嗯，我决定删除 <nav class="navbar bottom navbar-expand-lg navbar-light bg-light self-navbar"> 并保持其他人不变。这样做时，我发现页脚与正文重叠。