html - 屏幕底部出现空白

Question

我遇到了一个问题，我的页面底部出现了一些空白，这些空白不知从何而来。

我在桌面上添加了一个滑出式菜单，此时开始显示空白。它已经在我的移动媒体查询中显示了很长一段时间(它总是有滑出式菜单)，所以我已经将问题确定为滑出式菜单中的某些内容。但是，查看开发工具，我无法确定是我的导航菜单的哪一部分导致了空白。 Hee 是一张显示该区域出现哪些元素的图像，但在我的代码中我没有看到任何导致它的原因。

我相信这是相关代码。

    .nav-panel-content {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      padding: 50px 0 0 0;

      overflow: hidden;

      /* smooth scrolling on touch devices */

      -webkit-overflow-scrolling: touch;

    }

    .from-right .nav-panel-container {

      right: 0;

      -webkit-transform: translate3d(100%, 0, 0);

      -moz-transform: translate3d(100%, 0, 0);

      -ms-transform: translate3d(100%, 0, 0);

      -o-transform: translate3d(100%, 0, 0);

      transform: translate3d(100%, 0, 0);

    }

    .nav-panel-container {

      position: fixed;

      width: 50%;

      height: 100%;

      top: 0;

      bottom: 0;

      background: #F0F0F0;

      z-index: 1;

      -webkit-transition-property: -webkit-transform;

      -moz-transition-property: -moz-transform;

      transition-property: transform;

      -webkit-transition-duration: 0.7s;

      -moz-transition-duration: 0.7s;

      transition-duration: 0.7s;

      -webkit-transition-delay: 0.3s;

      -moz-transition-delay: 0.3s;

      transition-delay: 0.3s;

    }

    .nav-panel::after {

      /* overlay layer */

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: transparent;

      -webkit-transition: background 0.8s 0.8s;

      -moz-transition: background 0.8s 0.8s;

      transition: background 0.8s 0.8s;

    }

    .nav-panel {

      position: fixed;

      top: 0;

      left: 0;

      height: 100%;

      width: 100%;

      visibility: hidden;

      -webkit-transition: visibility 1s;

      -moz-transition: visibility 1s;

      transition: visibility 1s;

      z-index: 999999999999;

    }

    .nav-panel-list {

      display: block;

      background-color: #F0F0F0;

      margin: 0;

      list-style: none;

      text-align: right;

      width: 100%;

      padding: 0;

      z-index: 9999999;

    }

<div class="nav-panel from-right">
  <header class="nav-panel-header">
    <div id="nav-slide-title">Menu</div>
    <a href="#0" class="nav-panel-close">Close</a>
  </header>
  <div class="nav-panel-container">
    <div class="nav-panel-content">
      <ul class="nav-panel-list">
        <a href="test_index">
          <li>HOME</li>
        </a>
        <a href="#">
          <li>WORK</li>
        </a>
        <a href="approach">
          <li>APPROACH</li>
        </a>
        <a href="services">
          <li>SERVICES</li>
        </a>
        <a href="contact">
          <li>CONTACT</li>
        </a>
        <span id="nav-project"><a href="discuss-project"><li>DISCUSS A PROJECT</li></a></span>
      </ul>
      <div id="nav-social-container">
        <div id="nav-social-title">DON'T BE SHY, LET'S GET SOCIAL.</div>
        <div id="nav-social-icons"><span class="nav-social-icon"><a href="http://facebook.com" target="_blank"><img src="/icons/facebookBlack.png" alt="facebook" height="30px" width="30px"></a></span><span class="nav-social-icon"><a href="http://twitter.com" target="_blank"><img src="/icons/twitterBlack.png" alt="twitter" height="30px" width="30px"></a></span>
          <span
          class="nav-social-icon">
            <a href="http://linkedin.com" target="_blank">
              <img src="/icons/linkedInBlack.png" alt="linkedIn" height="30px" width="30px">
            </a>
            </span>
        </div>
      </div>
    </div>
    <!-- nav-panel-content -->
  </div>
  <!-- nav-panel-container -->
</div>
<!-- nav-panel -->

Answer 1

空白是由填充引起的。转到您的 main-style.css 并删除以下内容。

#dark-gray-container-button {
    padding-top: 80px;
}

并更改这个的填充

#dark-gray-container {
    text-align: center;
    padding: 150px 0 0;
}