Microsoft Edge中的填充和溢出滚动

Question

我希望.wrapper在元素的底部有76px的padding。为什么Microsoft Edge不尊重.wrapper的{​​{1}}属性？

是否有针对最后一个孩子不涉及padding-bottom的修复？

margin

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

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>