javascript - jQuery 菜单没有完全隐藏

Question

所以我有一个菜单，当您单击一个按钮时，它会打开一个充满链接的灯箱。 Lightbox 应该仅在单击按钮时显示，但不幸的是，一小部分(大约 183 像素，具体取决于屏幕尺寸)显示在页面的最底部。

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});

#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  height: 0;
  top: 100%;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>

有什么我想念的吗？不知道为什么它在那里。这就是我的:https://jsfiddle.net/9dftx1vg/1/

我很确定这很简单，只是我无法完全理解它!

Answer 1

将 box-sizing: border-box 添加到灯箱 CSS 规则，否则它具有的 35% 顶部填充 添加 到 * height: 0* “隐藏”状态。