问题描述
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website</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">
<style>
body {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar text-light">
<a class="navbar-brand" href="http://localhost/project/new_version/"><img src="" alt="Website" title="Website" width="30" height="30" loading="lazy" /> Website</a>
<ul class="navbar-nav self-first-ul">
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/919595951111"><i class="fab fa-whatsapp"></i> 9595951111</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:email@site.com"><i class="far fa-envelope"></i> email@site.com</a></li>
<li class="nav-item"><a class="nav-link" href="tel:9595950000"><i class="fas fa-mobile-alt"></i> 9595950000</a></li>
</ul>
</div>
</span>
</nav>
<div class="container p-3 bg-white rounded">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade d-none d-md-block d-lg-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C6</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C8</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C5</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="row">
<label for="Number">Search your transaction 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>
<p><a href="http://localhost/project/new_version/how2search" target="_blank">How to search specific transaction?</a></p>
</div>
<footer class="footer bg-primary">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Company Name</h3>
<p>Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph.
Some text to be shown. This will be a paragraph.</p>
</div>
<div class="col-md-3 ml-auto">
<h3>Links</h3>
<ul class="list-unstyled footer-links">
<li><a href="#home-section">Home</a></li>
<li><a href="#category-section">Categories</a></li>
<li><a href="#contact-section">Contact Us</a></li>
<li><a href="about.PHP">About Us</a></li>
<li><a href="tnc.PHP">Terms & Conditions</a></li>
<li><a href="refund_policy.PHP">refund Policy</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>Dial Sales & Support</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_phone.'" title="Dial '.$website_phone.'"> '.$website_phone.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_mobile.'" title="Dial '.$website_mobile.'">'.$website_mobile.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="https://wa.me/91'.$website_wamobile.'" title="Whatsapp '.$website_wamobile.'">'.$website_wamobile.'</a></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <strong></strong><a href="mailto:'.$website_email.'"> '.$website_email.'</a></p>
<p><i class="fa fa-calendar-check-o" aria-hidden="true"></i><strong></strong> Monday to Saturday</p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <strong></strong> 10am to 6pm</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
Website Slogan
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>我真正想要的是，页脚应始终位于底部。就像如果正文内容很长（可滚动），则页脚应排在最后。但是如果内容很少，则以一两行结尾的页脚应该在底部。之后没有空格了。
解决方法
使用Flexbox
$("#add").on("click",function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae,ultricies eget,tempor sit amet,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});html,body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome,Opera,and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome,and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background:#fe5;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>