如何解决页脚始终位于底部，但不固定
如何使引导程序页脚始终位于底部而不固定？
例如，在下面的代码中，页脚应位于底部。 （页脚后的空白应在页脚前）。这可以通过使用 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" /> '.$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" /> '.$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>解决方法
您的问题是页脚位于身体的底部，但是您的身体小于页面
您应该使用此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","bank_account_number":"2621556085816","account_holder_name":"PT ABV ASIA TENGGARA",{"bank_code":"BNI","bank_account_number":"880855854767",{"bank_code":"PERMATA","bank_account_number":"821457925493","account_holder_name":"PT ASIA TENGGARA",{"bank_code":"BCA","bank_account_number":"1076620926923","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:
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。