如何在 Bootstrap 中删除页眉上方和页脚下方的多余空格？ [关闭]答案

【问题标题】：How to remove extra white spaces above the header and below footer in Bootstrap? [closed]如何在 Bootstrap 中删除页眉上方和页脚下方的多余空格？ [关闭]
【发布时间】：2020-06-11 16:03:35
【问题描述】：

我在引导程序中开发了页眉和页脚，并在 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;
}

【问题讨论】：

你好。请在插入所有相关代码时尝试重现问题，方法是编辑您的问题并单击 Ctrl+M 插入代码。
您是否检查过浏览器工具中的元素并查看布局和规则 (firefox) 或样式和计算 (chrome)？

标签： css bootstrap-4 header footer

【解决方案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>

【讨论】：

嘿！这确实删除了额外的空格，但在这种情况下，正文与标题重叠。如何将正文与标题分开？
你的意思是header现在隐藏在body下面了？？如果是这种情况，那么也许在标题上添加一个 z-index 就可以了：#topNav{position:fixed;顶部：0；左：0；宽度：100%；高度：70px；行高：60px；背景颜色：#CC0033;z-index:2;}