Question

如何使引导程序页脚始终位于底部而不固定？

例如，在下面的代码中，页脚应位于底部。（页脚后的空白应在页脚前）。这可以通过使用 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>

Answer 1

您的问题是页脚位于身体的底部，但是您的身体小于页面

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

"id":"5f38a9e14b73f4203a87465b","external_id":"invoice-1597479693","user_id":"5da7afcf5bf71e7c19d0a722","status":"PENDING","merchant_name":"PT Evi Asia Tenggara","merchant_profile_picture_url":"https://du8nwjtfkinx.cloudfront.net/vdit.png","amount":3800000,"payer_email":"customer@domain.com","description":"Invoice Demo #1234","expiry_date":"2020-08-17T03:37:05.746Z","invoice_url":"https://invoice-staging.vdit.co/web/invoices/5f38a9e14b73f4203a87465b","available_banks":[{"bank_code":"MANDIRI","collection_type":"POOL","bank_account_number":"8860848092927","transfer_amount":3800000,"bank_branch":"Virtual Account","account_holder_name":"PT ABC ASIA TENGGARA","identity_amount":0},{"bank_code":"BRI","collection_type":"POOL","bank_account_number":"2621556085816","transfer_amount":3800000,"bank_branch":"Virtual Account","account_holder_name":"PT ABV ASIA TENGGARA","identity_amount":0},{"bank_code":"BNI","collection_type":"POOL","bank_account_number":"880855854767","transfer_amount":3800000,"bank_branch":"Virtual Account","account_holder_name":"PT ABC ASIA TENGGARA","identity_amount":0},{"bank_code":"PERMATA","collection_type":"POOL","bank_account_number":"821457925493","transfer_amount":3800000,"bank_branch":"Virtual Account","account_holder_name":"PT  ASIA TENGGARA","identity_amount":0},{"bank_code":"BCA","collection_type":"POOL","bank_account_number":"1076620926923","transfer_amount":3800000,"bank_branch":"Virtual Account","account_holder_name":"PT ABC ASIA TENGGARA","identity_amount":0}],"available_ewallets":[],"should_exclude_credit_card":false,"should_send_email":false,"created":"2020-08-16T03:37:05.804Z","updated":"2020-08-16T03:37:05.804Z","currency":"IDR"}
JSON received:

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

1 个答案: