Microsoft Edge中的填充和溢出滾動

Question

我希望.wrapper在元素的底部有76px的padding。爲什麼在Microsoft Edge中沒有.wrapper的padding-bottom屬性？

是否有解決此問題的最後一個孩子不涉及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

它不是一個單獨的邊緣微軟的問題，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>