css overflow-scroll-with-padding (Webkit VS Firefo

fish 发布于2019-08-30 11:10 / 901人阅读

摘要：场景有一个容器，宽高一定，有内边距，当容器的内容子元素超出容器时出现滚动条。这一场景在和表现不一致，布局。代码如下这是一个标题可以看到，会将滚动容器的下内边距一起作为滚动内容，而和不会。我们期望得到的是的行为。

场景：有一个容器，宽高一定，有内边距，当容器的内容（子元素）超出容器时出现滚动条。这一场景在 Chrome 和 Firefox（IE）表现不一致，border-box 布局。代码如下：




    
    title
    


    
        这是一个标题

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;
}


    
        这是一个标题

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114817.html

设备物理像素、设备独立像素

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone...

cgh1999520 2019-08-21 11:29 评论0 收藏0
设备物理像素、设备独立像素

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone...

wums 2019-08-30 15:52 评论0 收藏0
设备物理像素、设备独立像素

摘要：设备像素比设备像素比简称定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到设备像素比物理像素设备独立像素在某一方向上，方向或者方向在中，可以通过获取到当前设备的。视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone...

yagami 2019-08-01 16:17 评论0 收藏0
CSS进阶篇--Normalize.css的使用（重置表）

摘要：相比于传统的，是一种现代的为准备的优质替代方案。保护了有价值的默认值通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。这就意味着你不用再为所有公共的排版元素重新设置样式。任何人都能够提交问题报告或者提交补丁。本文译自Normalize.css官网: http://nicolasgallagher.com/a... Normalize.css 只是一个很小的CSS文件，但...

dack 2019-08-28 18:16 评论0 收藏0
谈谈text-overflow的那些坑和应对方法

摘要：基本语法默认值，将溢出的文本裁减掉将溢出的文本用省略号来表示设置一个字符串用来表示溢出的文本兼容性上，除了外，其余两个属性兼容到了，所以大可放心使用。原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的属性，它规定了当文本溢出其包含元素时以何种方式显示。但在使用的时候，有时会发现这个text-overflow设置了属性...

nodejh 2019-08-29 16:26 评论0 收藏0