css overflow-scroll-with-padding (Webkit VS Firefox)

2019-06-13 admin

场景:有一个容器,宽高一定,有内边距,当容器的内容(子元素)超出容器时出现滚动条。这一场景在 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

clipboard.png

Firefox 67 clipboard.png

IE 11

clipboard.png

可以看到,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>

欢迎各位大腿提出更好的解决方案~

[转载]原文链接:https://segmentfault.com/a/1190000019471413

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67234.html

文章标题:css overflow-scroll-with-padding (Webkit VS Firefox)

相关文章
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
数据格式之战:JSON vs XML
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言,简称GML,它主要是为脚本语言定义的一...
2016-01-13
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Javascript中实现String.startsWith和endsWith方法
在操作字符串(String)类型的时候,startsWith(anotherString)和endsWith(anotherString)是非常好用的方法。其中startsWith判断当前字符串是否以anotherString作为开头,而e...
2017-03-24
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
本文实例讲述了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例。分享给大家供大家参考。具体如下: &#x2F;** * JavaScript macro to run a chess game, showing board, ...
2017-03-22
回到顶部