Question

我无法确定该空间的来源（在所附图片中以红色标记）？有指针吗？

Image of strange space 这是“即将推出”页面，主要包含标头和标尺，并且某些社交链接在移动设备或台式机上的位置也不同。我在使用移动视图时遇到问题。

这是相关的HTML：

<div class="masthead">
  <div class="masthead-bg"></div>
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-12 my-auto">
        <div class="masthead-content text-white py-5 py-md-0">
          <h1 class="mb-3">Register</h1>
          <p class="mb-5">Building a X.
          We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
          <form action="https://hen.us18.list-manage.com/subscribe/post" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
            <input type="hidden" name="u" value="377b993ba697354f6584371c9">
            <input type="hidden" name="id" value="e1c7ba1f4b">
            <div class="input-group input-group-newsletter">
              <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter your email..." aria-label="Enter email..." aria-describedby="basic-addon">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="submit">Notify Me!</button>
              </div>
                <input type="hidden" name="ht" value="f5b0455009025ab4743b2ecc932316028905c673:MTUzMTgyNjMzMC43NDM3">
                <input type="hidden" name="mc_signupsource" value="hosted">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="mastfoot">
      <div class="inner-mastfoot">
        &copy; 2018 X Ltd. All Rights Reserved. &nbsp;&nbsp;&nbsp;&nbsp; • 
    &nbsp;&nbsp;&nbsp;&nbsp; <a href="/legal">Legal</a> 
&nbsp;&nbsp;&nbsp;&nbsp; 
    • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/contact">Contact</a>
      </div>
  </div>

<div class="social-icons">
  <ul class="list-unstyled text-center mb-0">
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-envelope"></i>
      </a>
    </li>
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-medium"></i>
      </a>
    </li>
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-linkedin"></i>
      </a>
    </li>
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-instagram"></i>
      </a>
    </li>
    <li class="list-unstyled-item">
      <a href="#">
        <i class="fa fa-facebook"></i>
      </a>
    </li>
  </ul>
</div>

和相关CSS：

.masthead .masthead-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  min-height: 35rem;
  height: 100%;
  background-color: rgba(0, 46, 102, .8);
  transform: skewY(4deg);
  transform-origin: bottom right
}

.social-icons {
  position: absolute;
  margin-bottom: 2rem;
  width: 100%;
  z-index: 2
}

.social-icons ul {
  margin-top: 2rem;
  width: 100%;
  text-align: center
}

.social-icons ul>li {
  margin-left: .75rem;
  margin-right: .75rem;
  display: inline-block
}

.social-icons ul>li>a {
  display: block;
  color: #fff;
  background-color: rgba(0, 46, 102, .8);
  border-radius: 100%;
  font-size: 1rem;
  line-height: 2rem;
  height: 2rem;
  width: 2rem
}

.mastfoot {
  color: #262626;
  color: rgba(26, 26, 26, .5);
  position: absolute;
  bottom: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  z-index: 2
}

.inner-mastfoot {
  font-size: 0.8rem;
  text-align: center
}

Answer 1

据我所知-在这种情况下，在桌面上，我将窗口的大小调整为与移动屏幕一样薄，这是因为您的内容不够高，无法填满屏幕。

图片：https://i.stack.imgur.com/9Cmyr.png

您的神秘空间就是<body>的高度，没有内容填充。

内联块之后如何删除该空间？

1 个答案: