css - 溢出-y空白空间错误？

Question

这似乎是一个相当常见且不那么奇特的用例，但我以前没有遇到过。我设置了一支笔，但无法在那里复制它，我正在努力找出原因。

Demo Pen

左侧边栏有一个用于元素列表的自定义滚动窗口，但是虽然设置 overflow-y: scroll 给了我一个很好的可滚动列表，但它也创建了一个巨大的空白 block ，等于如果 overflow-y 未设置为滚动，左侧列表的高度。这个空白在 HTML 标签之外(因为蓝色背景停止了)。所以看起来高度计算正在发生一些事情，但我只是不知道我还能玩什么。

在我的应用程序中，我尝试在我的内容包装器上同时注释掉 overflow-y 和 display: grid，并且在执行任一操作后，空白消失。但是我当然需要这两个属性。我需要在某处设置另一个高度吗？

Answer 1

我终于找到问题了!与绝对定位的元素有关。我正在使用自定义复选框来填充正方形而不是浏览器的默认值，并且该代码的一部分(我借用并修改了)是将 input 本身设置为 position:absolute 这当然使它脱离了正常流程(因此我的 100vh 没有产生任何影响)。只需添加 top: 0 即可解决所有问题。如果有人能解释为什么将 top 设置为其默认值会有所不同，我会很高兴。

HTML( Angular )

<li class="flex justify-between" *ngFor="let error of hardSummary">
    <input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
    <label for="{{'h' + error.errorCode}}">
        {{error.errorCode}}
    </label>
  <span>{{error.count}}</span>
</li>

SCSS:

.m-checkbox {
  position: absolute;
  opacity: 0; // hide it
  top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD

  & + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  // Box.
  & + label:before {
    content: '';
    margin-right: 4px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #f4f4f4;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  // Box hover
  &:hover + label:before {
    background: #d8d8d8;
  }

  // Box focus
  &:focus + label:before {
    border: 1px solid #666;
  }

  // Box checked
  &:checked + label:before {
    background: #448aff;
  }

  // Disabled state label.
  &:disabled + label {
    color: #b8b8b8;
    cursor: auto;
  }

  // Disabled box.
  &:disabled + label:before {
    box-shadow: none;
    background: #ddd;
  }

  // Checkmark. Could be replaced with an image
  &:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
    transition: all 0.2s;
  }
}