我已经在Bootstrap中开发了页眉和页脚，并在CSS中设置了样式。但是页眉上方和页脚下方都有一个空白区域。我不确定是什么原因导致空白出现在此处。
这里是代码：
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;
}
而且主体和标题之间也没有空格。我想在那儿增加一些空间。
我不知道您到底想做什么，但这就是我得到的，问题出在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>