场景：有一个容器，宽高一定，有内边距，当容器的内容（子元素）超出容器时出现滚动条。这一场景在 Chrome 和 Firefox（IE）表现不一致，border-box 布局。代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>title</title> <style type="text/css"> * { box-sizing: border-box; } .box { overflow: auto; border: 4px solid #f00; padding: 30px; width: 200px; height: 200px; background-color: #ffb475; } .content { width: 100%; height: 150px; background-color: #8b8bff; } </style></head><body> <div class="box"> <h3>这是一个标题</h3> <div class="content"></div> </div></body></html>Chrome 74
Firefox 67
IE 11
可以看到，Chrome 会将滚动容器的下内边距（padding-bottom）一起作为滚动内容，而 Firefox 和 IE 不会。
我们期望得到的是 Chrome 的行为。为了让 Firefox,IE 与 Chrome 变现一致，有如下解决方案：
解决方案1
利用 css3 选择器，为滚动容器内最后一个元素添加 margin-bottom （前提：最后一个元素为块级元素，最后一个元素不能 display: none;）
.box { padding-bottom: 0;}.box > :last-child { margin-bottom: 30px;}解决方案2
为滚动容器添加一个伪类
.box { padding-bottom: 0;}.box::after { content: ""; display: block; height: 30px; width: 100%;}解决方案3
在滚动容器内，添加一个html元素作为容器，写上 padding-bottom ，把内容全部写在这个元素内
.box { padding-bottom: 0;}.con-wrap { padding-bottom: 30px;}<div class="box"> <div class="con-wrap"> <h3>这是一个标题</h3> <div class="content"></div> </div></div>欢迎各位大腿提出更好的解决方案~