开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

可滚动高度忽略Safari/Chrome中可滚动div的最后一个子级的下边距

可滚动高度忽略Safari/Chrome中可滚动div的最后一个子级的下边距是指在Safari和Chrome浏览器中，当一个div元素设置了可滚动的高度，并且该div元素的最后一个子级元素存在下边距时，浏览器会忽略该下边距，导致最后一个子级元素与div底部之间没有间距。

这个问题通常出现在使用CSS的overflow属性设置为scroll或auto的div元素上。当div元素的内容超出了其可见区域时，浏览器会自动显示滚动条，以便用户可以滚动查看内容。然而，在Safari和Chrome浏览器中，如果最后一个子级元素存在下边距，该下边距会被忽略，导致最后一个子级元素紧贴着div底部。

解决这个问题的方法是在最后一个子级元素之后添加一个空的占位元素，并设置其高度为所需的下边距值。这样可以确保最后一个子级元素与div底部之间有适当的间距。

腾讯云相关产品中，可以使用腾讯云的云服务器（CVM）来搭建网站或应用程序，并通过自定义CSS样式来解决这个问题。腾讯云的云服务器提供了灵活的配置选项和高性能的计算能力，可以满足各种云计算需求。

更多关于腾讯云云服务器的信息，请访问腾讯云官方网站：https://cloud.tencent.com/product/cvm

相关搜索:创建一个包含整个PDF高度的可滚动div 如何让一个可滚动的div的高度动态化？ScrollTop仅滚动到可滚动div中可见的第一视图项使div中的元素忽略其容器大小，并使容器可滚动在flex容器中绝对可滚动的div没有固定的高度，这是可能的吗？如何在可滚动的div中冻结html表的第一列和最后一列？如何使用JS将div滚动到页面加载时的最后一个子级？如何确保鼠标滚轮/滚轮事件在可滚动div中的每个滚动中只触发一次在td中创建一个可滚动的div，其中的div定义了绝对位置使一个div可滚动，直到结束，如果另一个重叠(基本上改变div的高度)如何让一个可滚动的表格从它的父表中获取高度(HTML + Bootstrap)在Flutter中放置一个可滚动列表，该列表使用剩余空间，但不是小块列表中的最后一个小部件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一篇文章带你了解CSS基础知识和基本用法

出现滚动条 no 没有滚动条 6)).背景大小 7)).背景图片的定位区域 <div style...固定值而且还支持百分比 4).边框Border 首先说一下边框风格，它的风格比较多，常用的一般是实线为主： hidden...static 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） div{ position:static } 4)).固定定位fixed...元素会作为一个表格标题显示（类似）此时的块级元素div就有了内联元素的特性了。...在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

11.1K2 0

CSS 实用手册

+ 左右内边距 + width；元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height； (1). margin 外边距，围绕在元素边缘周围的空白区域，默认不能被其他元素所占据，作用是拉伸两个元素间的距离...外边距的溢出, 特殊场合下，为子元素设置外边距(上下)会作用到父元素上特殊场合： a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距解决方案： a....在父元素中，增加空子元素到最后一个位置处,并且设置其 clear 属性为 both 弊端:多一个子元素在页面上 45. position:relative 相对定位，元素会相对于它原来的位置偏移某个距离...#tbl td:first-child 获取 id 为 tbl 表格中每个 tr 中的第一个 td B. :last-child 获取属于其父元素中的最后一个子元素 C....在父元素的第一个或最后一个子元素位置处，增加一个空 table 用内容生成解决外边距的代码如下: 选择器:before{ content:""； display:table

2.7K1 0

JavaScript DOM元素尺寸和位置

，为184； 4.增加内边距，最终值等于原本大小加上内边距的大小，为220； PS：如果说没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0。...) IE、Chrome和Safari浏览器会忽略边框大小，200 x 200 c) IE浏览器只显示它本来内容的高度，200 x 18 2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220...5.增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。...； 3.增加外边据，无变化； 4.增加滚动条，无变化，不会减小； PS：对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。...box.scrollTop;//获取滚动内容上方的位置 box.scrollLeft;//获取滚动内容左方的位置如果要让滚动条滚动到最初始的位置，那么可以写一个函数： function scrollStart

2.8K7 0

Affix 组件学习

如果进行滚动，超过定义的范围就会固定定位，否则会跟随页面滚动 [7857f11d-c51b-4f02-9e43-ace57e9ce47f.gif] 上一节我们介绍了 DButton 和 DIcon 的实现...-- 定位元素滚动时监听 root 位置和页面可视区的关系设置 fixed，定位的时候设置样式--> 外层定义 d-affix 类，高度和内部的元素相同...type: String, default: '' }, // 上下偏移量 offset: { type: Number, default: 0 }, // 距上边距下边距...transform: 0 // 元素在 target 中定位时 y 方向移动 }) // 计算属性，滚动时才能具体获取 // d-affix 类一直存在文档流中，只要宽高，滚动位置判断是否 fixed

1.3K3 0

纯滚动怎么理解_scrollview不滚动

本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight 　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth...，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性　　[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight...但是由于各个浏览器表现不一样，分为以下几种情况　　【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...，具体高度由元素的高度决定　　[注意]该方法只有safari支持 <div id="test" style="width: 100px;height: 100px;padding: 10px;margin

1.9K2 0

css笔记

a里面可以放块级元素块级元素和行内元素区别块级元素的特点：（1）总是从新行开始（2）高度，行高、外边距以及内边距都可以控制。...浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。...SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体...:first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ：匹配属于其父元素的第 N 个子元素...，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

7.7K5 0

CSS 中你需要知道 auto 的一切！

在我们的例子中，这种情况发生了。但是，如果布局是rtl，那么margin-left将被忽略。 ?...考虑下面的模型，父级元素是一个 flex 布局： ? 我们想把第二项推到最右边，自动边距就派上用场了。...更好的是，使用flexbox或grid属性，以防使用它们完成工作。如果没有，那么请使用自动页边距作为最后的选择，而应使用CSS逻辑属性。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。根据MDN：取决于用户代理。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。

5.3K3 0

CSS深入理解学习笔记之overflow

JS滚动高度： chrome浏览器：document.body.scrollTop; 其他浏览器：document.documentElement.scrollTop; ? 　　...注：除chrome浏览器之外，其他所有浏览器的padding-bottom是缺失不显示的。也会导致scrollHeight值不一样。 ?...滚动条的宽度机制：　　　　滚动条会占用容器的可用宽度或高度。 ?...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。　　...（3）锚点定位的触发　　　　①url地址中的锚链与锚点元素；　　　　②可focus的锚点元素处于focus状态；　　（4）锚点定位的作用　　　　①快速定位　　　　②选项卡技术　　　　③单页应用

4.1K5 0

css必知的几个底层知识和技巧

，每一行就是一个行框盒子包含盒子：由行框盒子组成的盒子幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。...，在IE和firefox下会忽略padding-bottom的值，chrome则不会，此时可以通过margin-bottom实现滚动容器的底部留白其本质区别在于：chrome是子元素超过父元素content...margin合并的三种场景相邻兄弟元素父级和第一个/最后一个子元素 * 解决方案：父级设置为块级格式化上下文元素父元素设置border-top/bottom值父元素设置padding-top/...bottom值父元素设置高度空块级元素margin合并 3.margin合并的计算规则 “正正取大值”，”正负值相加”，”负负最负值” 4.深入理解margin:auto 如果一侧定值，一侧auto...,随着margin-top负值越来越大，达到某一具体负值时，图片将不再往上偏移六.字母x与css中的基线基线字母x的下边缘 x-height 指字母x的高度 ex：ex指小写字母x的高度，是相对单位

2.1K2 0

Day7:html和css

清除浮动的方法额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用after伪元素进行清除浮动. .clearfix:after...三个大模块：盒子模型、浮动、定位盒子边框（border） border : border-width || border-style || border-color none：没有边框即忽略所有边框的宽度...表格的细线边框 table{ border-collapse:collapse; } collapse 单词是合并的意思 border-collapse:collapse; 表示相邻边框合并在一起...both // 父级添加overflow属性方法给父级添加： overflow为 hidden|auto|scroll 都可以实现使用...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条鼠标样式cursor cursor

1.9K3 0

jQuery方法position()与offset()区别

参考别人写得比较明白的，红色部分为重点吧：使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同...可以看看下边的图： ? 从图中我们可以大体看出两者的区别。...position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...offset()始终返回相对于浏览器文档的距离，它会忽略外层元素下边看个简单的例子，这里外层的div元素(position:relative)仅一个： //获取相对于最近的父级(position:relative)的位置var vposition = $("#inner").position(); alert(vposition.left

7136 0

CSS学习记录及整理

（利用优先级来过滤）优先级-- 内联样式表>内部样式表>外部样式表>浏览器默认设置同级中的由高到低（含有!...:nth-child(n)--例子：p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :nth-last-child(n)--同上，从最后一个子元素开始计数。...:nth-last-of-type(n)---同上，但是从最后一个子元素开始计数。...--左边框外边距 margin--设置所有外边距属性，一般用于兄弟关系。...注意：块级元素的垂直相邻外边距会合并，水平则不会。

6.9K8 0

如何把控css的方向感

，每一行就是一个行框盒子包含盒子：由行框盒子组成的盒子幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。....mg-item:nth-of-type(3n){ margin-right: 0; } 复制代码注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome...其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件块级元素，...但不包含浮动和绝对定位元素在默认文档流下只出现在垂直方向 margin合并的三种场景相邻兄弟元素父级和第一个/最后一个子元素 * 解决方案：父级设置为块级格式化上下文元素...,随着margin-top负值越来越大，达到某一具体负值时，图片将不再往上偏移六.字母x与css中的基线基线字母x的下边缘 x-height 指字母x的高度 ex：ex指小写字母x的高度，是相对单位

1.2K1 0

Html元素的scrollWidth和scrollHeight详解 .

索性自己测试一下，包含的浏览器有IE 6，IE 7，IE 8，IE 9，Firefox，Chrome，Opera，Safari，顺便把测试的截图也发上来，这样大家看着也明白。...综上所述，结合IE和Firefox的官方文档的解释，我认为scrollWidth的语义就是当一个元素有滚动条的时候，scrollWidth表示的是元素内容区域的滚动宽度，当没有滚动条的时候，就是元素的本身宽度...再来看看firefox是如何表现的。 4、Firefox （1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距（2）有滚动条，有内容。...最后，结果是ie8、ie9、firefox、chrome、opera、safari的表现都是一致的，具体我就不截图了。IE 6和IE 7表现一致，但是他们的内容宽度有bug。...最后，我向bugzilla提交了一个firefox的bug。受理的很快，中午提交，下午就有人回复。地址在这里：https://bugzilla.mozilla.org/show_bug.cgi?

8271 0

详解各种获取元素宽高及位置的属性

offsetHeight HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。...通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。...对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; ?...clientHeight Element.clientWidth 是一个只读属性，对于没有定义 CSS 或者内联布局盒子的元素为0，同时它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距...此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。

4K8 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

作者：Chidume Nnamdi 译者：前端小智来源：smashingmagazine 在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。...在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...在 macOS 上的Chrome上会很好看。然而，在 Windows上，滚动条总是在那里(即使内容很短)。...在下面的示例中，每个项目的右侧都有8px的空间，但是由于使用display：inline-block导致增加了一个空格，最后结果是12px，这不是期望的结果。 ?...压缩或拉伸图像在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可能会对其进行压缩或拉伸。

3.7K1 0

CSS-03

# 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。...技巧：让一个正方形变成圆圈 border-radius: 50%; 以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。而我们这里矩形就只用用高度的一半就好了。...# 外边距实现盒子居中可以让一个盒子实现水平居中，需要满足一下两个条件：必须是块级元素。盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，就可使块级元素水平居中。...# CSS层叠性所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。...也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!

2.1K3 0

JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop...、内边距和元素的水平滚动条（如果存在且渲染的话），是一个整数。...计算：50+60(上下内边距)+2(上下边框)=112 offsetTop，只读 HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素。...所以当滚动条在最顶端的时候， scrollTop=0 ，当滚动条在最低端的时候， scrollTop=115 这个115怎么来的（滚动条高度是15，我量的），见下图。...如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

8861 0

前端面试题2（CSS）

优先级就近原则，同权重情况下样式定义最近者为准载入样式以最后载入的定位为准优先级为: !...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。...Flexbox 用于不同尺寸屏幕中创建可自动扩展和收缩布局经常遇到的浏览器的JS兼容性有哪些？解决方法是什么？...； :after 是 CSS1 中存在的、兼容IE的老语法如何修改Chrome记住密码后自动填充表单的黄色背景？...一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度方案1： .sub { height: calc(100%-100px); } 方案2： .container

2.8K1 1

HTML+CSS练习题【详解】

行高由文字大小与上边距组成 B. 行高由文字大小与下边距组成 C. 行高由文字大小与上下边距组成 D. 行高由上边距与下边距组成针对行高的作用，下面哪个选项是正确的（） A....一个标签只能有一个id名【题组四】下列不属于后代选择器特点的有（） A. 选择器名之间用空格隔开 B. 最终效果作用在最后一个选择器名身上 C. 后面的元素是前面的后代 D....块级元素默认宽度是父级的100% B. 块级元素独占一行 C. 块级元素不可以设置宽高 D....宽275 高200 【题组六】关于结构伪类下列说法错误的是() A. first-child可以选取父元素里面的首个子元素 B. last-child 可以选取父元素里面的最后一个子元素 C....固定定位的元素会跟随浏览器滚动条进行滚动 B. 绝对定位的元素会参考设置了定位(非静态)的父元素或者祖级元素进行定位对齐 C. 静态定位是元素的默认定位方式，不需要设置 D.

3591 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭