如何去除Bootstrap网站页脚下方的空白区域？

使用Bootstrap搭建的网站底部存在空白区域，以下是页面头部、CSS样式、主体及页脚代码：

头部与CSS #

<!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>
</head>

主体代码 #

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

问题根源 #

1. Bootstrap版本冲突：同时引入Bootstrap 5和Bootstrap 4的CSS、JS文件，样式冲突引发布局异常。
2. 页脚高度设置不合理：.foot固定高度70px，但实际页脚内容总高度远超该值，内容溢出被截断，视觉呈现底部空白。
3. 重复闭合标签：页脚代码末尾存在重复的</body>和</html>，导致浏览器解析异常。

修复步骤 #

1. 清理重复的Bootstrap引用：保留Bootstrap 5版本，删除Bootstrap 4的CSS、JS引用，同时删除重复的<title>标签：

   <!-- 删除以下内容 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
   <title>We CARE for your health</title>
   

2. 调整页脚样式：取消固定高度和固定定位，利用Bootstrap flex布局特性让页脚自动贴合底部：
   修改.foot的CSS：

   .foot {
       width: 100%;
       min-height: 70px; /* 改为最小高度，允许内容撑开 */
       background: white;
       margin-top: auto; /* 配合body的flex布局，自动推至页面底部 */
   }
   

3. 删除重复闭合标签：移除页脚代码末尾重复的</body>和</html>，保证页面结构正确。

修复后的核心代码示例 #

头部样式部分

<style> 
/* 其他样式保留 */

/* 调整后的页脚样式 */
.foot {
   width: 100%;
   min-height: 70px;
   background: white;
   margin-top: auto;
}
</style>

页脚部分

<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>
</body>
</html>

内容的提问来源于stack exchange，提问作者Heng Phin