頁腳始終位於底部但不固定
[英]Footer to be always at bottom but not fixed
問題描述
我們如何使引導頁腳始終位於底部但不固定？
例如在下面的代碼中，頁腳應該在底部。 （頁腳后的空白應在頁腳前）。 這可以通過使用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>
1 個解決方案
解決方案1
2 2020-08-16 08:23:41
你的問題是你的頁腳在你的身體底部，但你的身體比你的頁面小
您應該使用此 css 示例為您的身體添加一個最小高度
body {
min-height: 100vh;
position: relative;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0
}
頁腳始終固定在頁面引導程序的底部嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.