Microsoft Edge 中的填充和溢出滚动

Question

我希望 .wrapper 在元素底部有 76px 的 padding。为什么 .wrapper 的 padding-bottom 属性在 Microsoft Edge 中不受尊重？

是否有不涉及最后 child 上的 margin 的解决方案？

.wrapper {
  height: 400px;
  width: 100%;
  background-color: red;
  overflow-y: scroll;
  padding-bottom: 76px;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
  <div class="wrapper__thing">Test</div>
</div>

Answer 1

这不仅仅是 Microsoft Edge 的问题，Firefox 也有同样的问题 issue

作为解决方法，在子容器中提供 padding-bottom。

.wrapper {
  height: 400px;
  width: 100%;
  background-color: red;
  overflow-y: scroll;
  box-sizing: border-box;
}
.wrapper_inner {
  padding-bottom: 76px;
}

<div class="wrapper">
  <div class="wrapper_inner">
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
    <div class="wrapper__thing">Test</div>
  </div>
</div>

Microsoft Edge 中的填充和溢出滚动

Padding and overflow scroll in Microsoft Edge

html

css

padding

microsoft-edge