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

Question

How can we make bootstrap footer always at the bottom but not fixed?我们如何使引导页脚始终位于底部但不固定？

For example in the below code, the footer should be at the bottom.例如在下面的代码中，页脚应该在底部。 (the white space after footer should be before footer). （页脚后的空白应在页脚前）。 This can be achieved by using sticky-bottom , but when there will be more content (when the page will be scrolled), it will be fixed will not be shown at last.这可以通过使用sticky-bottom来实现，但是当内容比较多时（页面会滚动时），它会被固定到最后不会显示。

How to achieve that?如何做到这一点？

 <;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

Your issue is your footer is at the bottom of your body, but your body is smaller than your page你的问题是你的页脚在你的身体底部，但你的身体比你的页面小

you should add a minimum height to your body with this css sample您应该使用此 css 示例为您的身体添加一个最小高度

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

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

问题描述

1 个解决方案

解决方案1
2 2020-08-16 08:23:41

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

问题描述

1 个解决方案

解决方案1 2 2020-08-16 08:23:41

解决方案1
2 2020-08-16 08:23:41