如何删除 Bootstrap 中页眉上方和页脚下方的多余空格？

Question

我在 bootstrap 中开发了页眉和页脚，并在 CSS 中设置了样式。但是在页眉上方和页脚下方有一个白色的 space。我不确定是什么导致白色 space 出现在那里。

代码如下：

header.php

<html dir="ltr" lang="en">
<head>

<title></title>

    <link rel="stylesheet" href="css/main.css" media="all">

    <link href="css/main.css" rel="stylesheet">
    <meta charset='utf-8' />
    <link href='fullcalendar.min.css' rel='stylesheet' />
    <link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='lib/moment.min.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='fullcalendar.min.js'></script>
</head>

 <nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
    <img src="images/logo.png" alt="Logo">

</nav>

footer.php

<footer class="footer">
<div class="container">
    <p class="m-20 text-center text-white"><br></p>
</div>

</footer>

main.css

body {
margin-top: 60px;
margin-bottom: 100px;
}

.footer {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px; 
background-color: #CC0033;
}

#topNav {
position: sticky;
width: 100%;
height: 70px;
line-height: 60px; 
background-color: #CC0033;
}

Answer 1

我不知道你到底想做什么，但这就是我得到的，问题出在 CSS，但请检查导航中的类在做什么

html,body {
height:100%;
}
body{
position:relative
}

.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px; 
background-color: #CC0033;
  left:0;
}

#topNav {
position: fixed;
  top:0;
  left:0;
width: 100%;
height: 70px;
line-height: 60px; 
background-color: #CC0033;
}

<html dir="ltr" lang="en">
<head>

<title></title>

    <link rel="stylesheet" href="css/main.css" media="all">

    <link href="css/main.css" rel="stylesheet">
    <meta charset='utf-8' />
    <link href='fullcalendar.min.css' rel='stylesheet' />
    <link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='lib/moment.min.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='fullcalendar.min.js'></script>
</head>

 <nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
    <img src="images/logo.png" alt="Logo">

</nav>


<footer class="footer">
<div class="container">
    <p class="m-20 text-center text-white"><br></p>
</div>

</footer>

如何删除 Bootstrap 中页眉上方和页脚下方的多余空格？

How to remove extra white spaces above the header and below footer in Bootstrap?

css

bootstrap-4

header

footer