overflow:auto学习

最新推荐文章于 2025-05-21 20:46:41 发布
最新推荐文章于 2025-05-21 20:46:41 发布
阅读量159 收藏 1
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhaogaojian/p/9601824.html
本文探讨了CSS中overflow属性的重要作用，不仅能够解决浮动元素导致的布局问题，实现self-clear效果，还能自动隐藏滚动条，提升用户体验。通过实际案例，展示了如何利用此属性优化iscroll组件的表现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一直认为没认为这个属性没什么大的用处，最近在使用一次iscroll时一直浮动到顶部层上面找了半天，发现可以用这个属性解决。

1、功能1，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。

 

2、就是常用的自动隐藏滚动条功能。

 

转载于:https://www.cnblogs.com/zhaogaojian/p/9601824.html

overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解
u013179804的博客
04-21 1万+
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
overflow的用法（auto）
Li_wen258的博客
05-15 5649
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 overflow：auto的用法 当一个父容器中的子元素加浮动，那么父容器的高度不会被撑开；当在父容器中加...
【前端基础】12、CSS的overflow（visible、hidden、scroll、auto）【注：只有最基础的说明。】
最新发布
陌上人如玉，公子世无双。
05-21 486
用于控制内容溢出时的行为。：超出的部分正常显示（默认设定） ：超出的部分隐藏显示（直接裁剪掉） ：超出的部分滚动显示 滚动条占用高度（weight）、宽度（height） 注意：如果高度超过文本的实际高度了，让然会有滚动条。 ：超出的部分自动调整显示（自动决定是否使用滚动机制。） 如果文本高度小于设定的高度：文本自动根据情况显示。 如果文本高度大于设定高度：自动显示滚动条。
CSS 属性 ----- overflow：auto 的使用
qq_43477721的博客
06-14 1万+
overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应 块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 <!DOCTYPE html> <html lang="en"> <head> .
overflow:auto,隐藏滚动条
YaRuu的博客
02-20 2409
overflow 、overflow-y、overflow-x: auto/scoll 都可以隐藏滚动条，并继续可以滚动。
ie6 overflow:auto不起作用的情况
管子（zero）的杂乱空间
10-23 1146
今天遇到一个比较特殊的情况：ie6下设置overflow:auto不起作用，在火狐下正常显示。ie下滚动条是出来了，但是内容却跑到下面去了，滚动条行同虚设。网上搜索了一下都说是设置高度和宽度就ok了，开始还以为是百分比高度引起的，但设置成绝对高度200px后还是不行。最后通过经验判断出原来是overflow的那个div没有position定位，给加了个定位和top,left属性后一切都正常了！汗，
详解CSS中zoom属性或overflow:auto属性清除浮动的作用
11-21
为了解决这个问题，我们可以利用`zoom`属性（在IE浏览器中）和`overflow:auto`属性（在非IE浏览器中）来实现浮动元素的清除。 `zoom`是Internet Explorer浏览器的一个专有属性，它允许我们设置或检索对象的缩放比例...
给el-card设置高为自动，当内部有元素时可以自动撑高，但是最大只能到60vh，超过60vh后设置为overflow：auto
05-25
你可以使用CSS的calc()函数和min()函数来实现这个效果。以下是一个示例代码： ... <!-- 这里放置你的元素 --> ...最后，我们给 `.content` 设置 `overflow: auto`，当内容超过 `.content` 的高度时，就会出现滚动条。
overflow:
04-01
常见的值有visible、hidden、scroll、auto，还有overflow-x和overflow-y。需要分别解释每个值的效果，最好用实际例子帮助理解。 接下来，要考虑用户可能遇到的常见问题，比如滚动条的出现条件，或者如何隐藏内容而...
给el-card设置高为自动，当内部有元素时可以自动撑高，但是最大只能到60vh，超过60vh，内部元素设置overflow:auto
05-25
可以通过设置 CSS 属性 `max-height` 来限制 `el-card` 的最大高度为 `60vh`，同时在内部元素中添加 `overflow:auto` 实现滚动条的出现。示例代码如下： ```css .el-card { max-height: 60vh; } .el-card__body {...
overflow：auto的用法和实现弹性盒横向滚动
YY的博客
09-29 1万+
overflow：auto的用法、实现弹性盒横向滚动
overflow: auto;没有惯性的问题
zgwnDong的博客
07-29 2788
要想使有overflow: auto;的盒子有滚动的惯性，需加以下代码： -webkit-overflow-scrolling : touch;
overflow
pscool的博客
05-12 1242
overflow 可选值：visible | hidden | scroll | auto 默认值：visible 复合属性。检索或设置对象处理溢出内容的方式。overflow的效果等同于overflow-x + overflow-y。 visible： 对溢出内容不做处理，内容可能会超出容器。 hidden： 隐藏溢出容器的内容且不出现滚动条。 scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。 auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
overflow:auto 不生效的原因
sdewendong的专栏
11-24 3万+
今天给我的一个div加滚动条的样式，overflow:auto ，死活不生效。 最后发现问题：为div指定overflow属性为auto没问题，但是必须指定div的高度，例子： &lt;div style="position:absolute; height:300px; overflow:auto"&gt; &lt;/div&gt; position:absolute 可加可不加，自己试...
overflow-x: auto 属性
菜鸟黑一枚
12-25 8253
当文本长度超出之后  overflow-x: auto 属性自动产生横向滚动条   &lt;template&gt; &lt;div class="content-container"&gt; &lt;title-bar titleName="案例详情"&gt; &lt;template slot="tool"&gt; &lt;
CSS3 Overflow:auto 滚动的优先级,以内部滚动为主
Oliver_web的博客
04-22 2532
1内部如果有滚动,优先内部滚动条为主
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值