内容简介：场景：有一个容器，宽高一定，有内边距，当容器的内容（子元素）超出容器时出现滚动条。这一场景在 Chrome 和 Firefox（IE）表现不一致，border-box 布局。代码如下：Chrome 74
场景：有一个容器，宽高一定，有内边距，当容器的内容（子元素）超出容器时出现滚动条。这一场景在 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>
欢迎各位大腿提出更好的解决方案~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
