Html 如何消除两个分区之间的白色间隙？

我正在使用Bootstrap 4和自定义CSS样式表，我的页面结构如下：

<header>
    <!-- header content (fixed) -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<div id="contact-information">
    <!-- contact information (absolute) -->
</div>

<footer class="footer">
    <!-- footer content (absolute) -->
</footer>

现在，我面临的问题是，我希望

填补

和

之间的所有差距，但实际输出是这样的：

<header>
    <!-- header content -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<!-- WHITE GAP -->

<div id="contact-information">
    <!-- contact information (absolute) -->
</div>

<footer class="footer">
    <!-- footer content -->
</footer>

我已经研究过类似的问题，但没有结果，仍然存在着白色的差距。我觉得这与我的自定义CSS有关。我的实际代码是（每个部分的HTML和CSS分别如下所示）：

HTML和CSS

<main role="main" class="container-fluid" style="border: 2px solid red;">
    <div id="content-container">
        <div id="content-container-content">
            <h2 class="text-uppercase">About Us</h2>

            <hr>

            <p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</main>

main {
    margin-top: 150px;
    padding: 0 !important;
}

#content-container {
    position: relative;
    height: 432px;
    background-color: white;
}

#content-container hr {
    visibility: hidden;
}

#content-container-content {
    position: absolute;
    text-align: center;
    width: 90%;
    color: #83323e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content-container-sub-content {
    font-size: 24px;
    width: 100%;
    color: #a63f4f;
    line-height: 40px;
}

<div id="contact-information">
    <h3>Company Name</h3>
    <p>12 Street, Area, City AB1 2CD, UK</p>
    <p>Tel: (01234) 123-456 | Mobile: 01234567891</p>
    <p>
        <a href="#" class="text-white" target="_blank">View in Map</a>
    </p>
    <div>
        <span style="cursor: pointer;">
            <i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
        </span>
        &nbsp; &nbsp;
        <span style="cursor: pointer;">
            <i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
        </span>
    </div>
</div>

#contact-information {
    position: absolute;
    height: 283px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: #a63f4f;
    bottom: 60px;
    padding: 50px;
}

关于我们

Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incident ut laboure et
多洛雷·麦格纳·阿利夸。但是，我们必须尽可能少地进行实验，因为我们的实验室是不合格的
ex ea commodo consequat。两人或两人在一起是因为他们在一起是因为他们在一起
欧盟福吉亚无法定权利。不可因疏忽而导致死亡的例外情况，不可因疏忽而导致死亡
这是我的劳动。

主要{
边缘顶部：150px；
填充：0！重要；
}
#内容容器{
位置：相对位置；
身高：432px；
背景色：白色；
}
#内容容器hr{
可见性：隐藏；
}
#内容容器内容{
位置：绝对位置；
文本对齐：居中；
宽度：90%；
颜色：#83323e；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#内容容器子内容{
字体大小：24px；
宽度：100%；
颜色：#a63f4f；
线高：40px；
}

HTML和CSS

<main role="main" class="container-fluid" style="border: 2px solid red;">
    <div id="content-container">
        <div id="content-container-content">
            <h2 class="text-uppercase">About Us</h2>

            <hr>

            <p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</main>

main {
    margin-top: 150px;
    padding: 0 !important;
}

#content-container {
    position: relative;
    height: 432px;
    background-color: white;
}

#content-container hr {
    visibility: hidden;
}

#content-container-content {
    position: absolute;
    text-align: center;
    width: 90%;
    color: #83323e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content-container-sub-content {
    font-size: 24px;
    width: 100%;
    color: #a63f4f;
    line-height: 40px;
}

<div id="contact-information">
    <h3>Company Name</h3>
    <p>12 Street, Area, City AB1 2CD, UK</p>
    <p>Tel: (01234) 123-456 | Mobile: 01234567891</p>
    <p>
        <a href="#" class="text-white" target="_blank">View in Map</a>
    </p>
    <div>
        <span style="cursor: pointer;">
            <i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
        </span>
        &nbsp; &nbsp;
        <span style="cursor: pointer;">
            <i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
        </span>
    </div>
</div>

#contact-information {
    position: absolute;
    height: 283px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: #a63f4f;
    bottom: 60px;
    padding: 50px;
}

公司名称
英国城市AB1 2CD区12街

电话：（01234）123-456 |手机：01234567891



#联系方式{
位置：绝对位置；
高度：283px；
宽度：100%；
文本对齐：居中；
颜色：白色；
背景色：#a63f4f；
底部：60px；
填充：50px；
}

视觉

请注意，带边框的红色框不会相应地占用所有空间

现场示例

请点击这里查看

---

所以，我的问题是，如何消除所述白色间隙？

以下是要在任何设备上消除该间隙应采取的措施：

• 根据您是否希望在每页（
  -页面内容上方，
  -页面内容下方）或仅在当前页面
  上放置联系人信息，将其放置在
  或
  中
• 停止使用
  进行样式设置。它是任何页面内容的容器，因此您添加到其中的任何样式都将应用于您网站的所有页面。最好将其视为一个功能容器，并仅根据您网站的特定需求为其子项设置样式
<> LI>如果你想“代码> <代码> <代码> min身高>代码>填满整个页面（允许全屏背景，可以在屏幕中间放置东西等），给它一个<代码>最小高度>代码> >代码> 100VH < /代码>，没有<代码>空白< /代码>，

填充顶部

等于
的实际高度，而

填充底部

等于
的实际高度。
由于
和
根据设备具有不同的高度，因此应使用JavaScript在

加载

和

调整
窗口
对象的事件大小时动态执行此操作

粗略地翻译成代码（我不得不做一些假设），上面的内容是：

函数setMinHeight（）{
$（'main'）.css({
paddingTop:$（'header nav'）.eq（0）[0]。clientHeight+'px'，
paddingBottom:$（'footer'）.height（）+'px'，
})
}
$（窗口）。on（'load resize'，setMinHeight）
#联系信息{
文本对齐：居中；
颜色：白色；
背景色：#a63f4f；
底部：60px；
填充：50px；
}
#内容容器{
背景色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：50px；
颜色：#83323e；
边框：2倍纯红；
}
#内容容器hr{
可见性：隐藏；
}
#内容容器子内容{
字体大小：24px；
颜色：#a63f4f；
线高：40px；
}
main:不是（#){
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
主内容容器{
柔性生长：1；
}
主要#联系方式{
flex:0自动；
}
.页脚{
位置：固定；
底部：0；
宽度：100%；
高度：60px；
线高：60px；
背景色：#83323e；
}
.bg黑暗：不是（##）{
背景色：#83323e！重要；
}









搜寻
关于我们

Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

公司名称
英国城市AB1 2CD区12街

电话：（01234）123-456 |手机：01234567891