矿井网底部有一个空白间隙
页眉和CSS#
这是我使用bootstrap的头文件，里面有一个空白我的底部网站这是我使用bootstrap的标题，里面有一个空白我的底部网站
这是使用bootstrap的我的头，在中有一个空白我的底部网站
这是使用bootstrap的我的头，在中有一个空白我的底部网站这是我使用bootstrap的标题，里面有一个空白我的底部网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<a href="<?= base_url('Home')?>" class="nav-item nav-link active px-5"><b>Home</b></a>
<a href="#" class="nav-item nav-link px-5"><b>Profile</b></a>
<a href="#" class="nav-item nav-link px-5"><b>Messages</b></a>
<a href="#" class="nav-item nav-link px-5" tabindex="-1"><b>Reports</b></a>
</div>
<div class="navbar-nav ms-auto">
<a href="<?= base_url('Auth')?>" class="nav-item nav-link px-5"><b>Login</b></a>
</div>
</div>
</div>
</nav>
</div>
页脚#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<a href="#"><i class="icon ion-social-instagram px-5"></i></a>
<a href="#"><i class="icon ion-social-snapchat px-5"></i></a>
<a href="#"><i class="icon ion-social-twitter px-5"></i></a>
<a href="#"><i class="icon ion-social-facebook px-5"></i></a></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3"><a href="#">Home</a></li>
<li class="list-inline-item px-3"><a href="#">Services</a></li>
<li class="list-inline-item px-3"><a href="#">About</a></li>
<li class="list-inline-item px-3"><a href="#">Terms</a></li>
<li class="list-inline-item px-3"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
你可以这样解决你的问题，
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
步骤1:设置身体min-height: 100vh;和position: relative;
第2:设定脚部width: 100%;、position: absolute;和bottom: 0;
这是css，
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
您可以通过右键单击页面并选择Inspect选项自行解决问题。