如何消除两个分区之间的空白？

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

视觉

请注意，带边框的红色框不会响应式占用所有空间。

现场示例

请点击这里查看live。

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

Answer 1

为了使这种差距在任何设备上消失，您应该执行以下操作：

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

大致翻译成代码（我不得不做出一些假设）以上将是：

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 现在很脆弱。有一些未解决的问题，还没有跨浏览器/跨设备。如果你真的买不起 CSS 人，你最好使用最新的v3，它非常可靠，测试超乎想象。您不太可能需要尚未完成的 v3 版本（v4 的情况并非如此）。
有关 v3 与 v4 以及从一个升级到另一个的更多详细信息，我最近回答了 this question 并且答案不变。对于生产环境，v4 还没有机会对抗 v3，恕我直言。