如何消除两个部门之间的白色差距？

Question

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

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

现在，我面临的问题如下，我希望 <main> 填补 <header> 和 <div id="contact-information"> 之间的所有差距，但实际输出是这样的：

<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将分别跟随）：

<main> 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"> HTML & CSS

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

视觉

请注意，带边框的红色框不会响应地占用所有 space。

实例

请点此查看live。

所以，我的问题是，我该如何去除所说的白色间隙？

Answer 1

为了消除任何设备上的差距，您应该执行以下操作：

将 #contact-information 放在 <header>、<footer> 或 <main> 中，具体取决于您是否希望它出现在每个页面上（<header> - 页面内容上方, <footer> - 在页面内容下方）或仅在当前页面 <main>
停止使用 <main> 进行样式设计。它是任何页面内容的容器，因此您添加到其中的任何样式都将应用于您网站的所有页面。最好将其视为一个功能性容器，并且仅根据您网站的特定需求为其子项设置样式
如果您希望 <main> 的 min-height 填满整个页面（允许全屏背景，能够将内容置于屏幕中间，等等...），给它 100vh 的 min-height，没有 margin，padding-top 等于 <header> 的实际高度和 padding-bottom 等于 <footer>s实际身高。
由于 <header> 和 <footer> 都有不同的高度基于设备，这应该动态地完成，使用 JavaScript，在 load 和 resize 事件上 [=34] =]对象。

粗略地翻译成代码（我不得不做出一些假设）以上内容将是：

function setMinHeight() {
  $('main').css({
    paddingTop: $('header nav').eq(0)[0].clientHeight + 'px',
    paddingBottom: $('footer').height() + 'px',
  })
}
$(window).on('load resize', setMinHeight);

#contact-information {
  text-align: center;
  color: white;
  background-color: #a63f4f;
  bottom: 60px;
  padding: 50px;
}

#content-container {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  color: #83323e;
  border: 2px solid red;
}

#content-container hr {
  visibility: hidden;
}

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

main:not(#_) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main #content-container {
  flex-grow: 1;
}

main #contact-information {
  flex: 0 0 auto;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #83323e;
}
.bg-dark:not(#_) {
    background-color: #83323e!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>
<main role="main" class="container-fluid">
  <div id="content-container" class="row">
    <div class="col-12">
      <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>

  <div id="contact-information" class="row">
    <div class="col-12">
      <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>
  </div>
</main>

<footer class="footer">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

我可能错了，但从我在你的例子中发现的情况来看，你的团队似乎缺少 CSS 人，你认为 Bootstrap v4 会帮助你填补空白。很可能不会。 Bootstrap 坚如磐石，如果：

您不会偏离给定的示例（不需要自定义布局）或...
您了解它背后的 CSS，它的逻辑以及如何修改它，这样您就不会在各种设备上破坏任何东西。

此外，v4 现在很脆弱。有一些未解决的问题，还没有 cross-browser/cross-device。如果你真的买不起 CSS 这个家伙，你最好使用最新的 v3，它非常坚固，经过超乎想象的测试。您不太可能需要尚未完成的 v3 内容（v4 并非如此）。
有关 v3 与 v4 以及从一个升级到另一个的更多详细信息，我最近回答了并且答案成立。对于生产环境，v4 还没有机会对抗 v3，恕我直言。

如何消除两个部门之间的白色差距？

How to remove white gap between two divisions?

html

css

twitter-bootstrap

bootstrap-4

removing-whitespace