overflow的几个坑

最新推荐文章于 2023-12-04 11:00:59 发布

转载最新推荐文章于 2023-12-04 11:00:59 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/miaochw/p/3615535.html

文章标签：

#matlab #嵌入式

在android 4.0的原生浏览器上注意：

html元素上不要加overflow: auto;的样式，否则会造成有些元素无法点击
在absolute元素上不要加 overflow: auto; 否则有时候input获得焦点时会出现两个input。

转载于:https://www.cnblogs.com/miaochw/p/3615535.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33938733

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

震惊！0.1+0.2≠0.3？MySQL浮点数的那些坑，你踩过几个？

程序员极光

07-02

579

MySQL浮点数精度陷阱解析文章揭示了MySQL中浮点数精度问题的本质，指出计算机二进制存储机制导致小数精度截断是根本原因。通过对比实验展示了FLOAT、DOUBLE和DECIMAL三种数据类型在实际应用中的精度差异，并分析了浮点数误差在不同运算场景中的表现特点。重点介绍了工业应用中必须使用浮点数的五大场景：科学计算、传感器网络、地理空间计算、游戏引擎和机器学习，其中DOUBLE类型在高精度需求领域占据主导地位。文中还提供了各类应用场景下的数据类型选择建议表，帮助开发者在精度与性能之间做出权衡决策。

-webkit-overflow-scrolling引起的bug

weixin_36094484的博客

07-08

1万+

上一次写移动端项目还是一年前，哎，这两天复习了下，用react写了个小demo，然后在苹果上遇到了以前遇到的坑。现在很多移动端网站都是web mobile app，UI是类app的样子，能看到一些mobile站首页是顶部-内容-底栏结构。我的demo暂且按这种结构布局，主页div存放商品内容，上下滑动没有滚动动画效果。这时候自然想到有个-webkit-overflow-scrolling:touc...

参与评论您还未登录，请先登录后发表或查看评论

css中的overflow需要注意的问题

shidaping的博客

12-01

1005

html中经常会碰到内容超出一个元素的显示范围。overflow就是用来控制超出内容的显示方式。它有以下几个可选项： visible(默认值)hiddenautoscrollinherit visible为默认值，内容会全部显示，但是会在元素框之外。 hidden为隐藏超出的内容。auto为内容超出时自动出现滚动条，否则不显示滚动条。scroll为始终显示滚动条。 css3中还有

Simulink仿真时报错Wrap on overflow detected.

weixin_42294159的博客

12-04

1692

模型设置（Ctrl+E）->诊断->数据有效性->溢出时绕回->设置为警告或者无。

内容溢出：overflow

热门推荐

weixin_43734012的博客

11-28

7万+

overflow: visible:默认值。内容不会被修建，会呈现在盒子之外 hidden:内容会被修剪，并且其余内容是不可见的 scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 auto：如果内容被修剪，则浏览器会显示滚动条以便查看 overflow：hidden和clear:both区别： overflow：hidden;作用在父元素，清除父元素内部所有浮动元素 clear:...

调试highcharts一误报bug过程

gbstack08的专栏

03-13

841

今天下午client提交了一个bug report, 说现在最新版本的YTD range不正确了, 而老版本的YTD range却正确, 我一看确实是于是打开了本地最新的版本, 一点YTD, 有这个问题, 再往回走2个版本还是有这个问题, 再回了5个, 问题还有. 我就直接换成了cilent最后发来的一个版本(这client抵触version control..), 问题竟然还在, 最终换成了

Big-man酷谈overflow

JackDan9

02-12

9867

Big-man酷谈overflow 代码实例: body { width: 100%; height: 100%; margin:0; padding:0; background:#ffe; font-size:12px; overflow:auto; /*border: 2px solid #333;*/ } 思考: overflo

自己搭建的umi2.10_项目_升级到了_umi3_后，出现了几个bug，这是个_

09-09

出现bug的原因可能包括但不限于以下几个方面： 1. 配置文件变更：Umi3可能引入了新的配置方式或废弃了旧的配置项，开发者需要对照官方文档进行相应的调整。 2. 路由机制变化：Umi3对路由的处理方式可能有所改变，...

深入研究-webkit-overflow-scrolling:touch及ios滚动

weixin_44415368的博客

07-27

191

-webkit-overflow-scrolling:touch是什么？ *MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动...

Mac上 homebrew+node+npm+yarn 安装和踩坑过程（stack overflow上出现的高分坑基本都踩了一遍）

weixin_39142112的博客

03-12

7912

Mac上 homebrew+node+npm+yarn 安装和踩坑过程一、第一步：安装homebrew终端执行报**错误1**：如果遇到**错误3**：报错误4（错误1发生过后）：一、第二步：安装node终端执行：报错：三、第三步：安装npm终端执行：四、第四步：安装yarn按步骤执行报错：若报错：总结：一、第一步：安装homebrew 注：安装homebre的目的主要是为了安装node 终端执...

overflow 属性

qq_43516282的博客

05-11

2万+

overflow 属性规定当内容溢出元素框时发生的事情，有以下值 1、visible：默认值，内容不会被修剪，会呈现在元素框之外。 2、hidden：内容会被修剪，并且其余内容是不可见的。 3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（不溢出也会有滚动条） 4、auto：如果内容被修剪（比如文字溢出时候），则浏览器会显示滚动条以便查看其余的内容。 ...

overflow问题

youngeffort的博客

08-28

1万+

现象：原因： overflow:scroll; 解决： overflow:auto;

word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行

QUX轻博客

09-14

2700

word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行。是由word-wrap演变而来，需要用其向后兼容。 nor...

css中overflow的那些坑

卜小娴的博客

07-31

1万+

元素的overflow属性是用来规定当内容溢出元素框时发生的事情，设置单个方向的overflow-x和overflow-y同理，它有五个值，visible（默认），hidden，scroll，auto，inherit，现在我们先来简单说下这几个属性值： visible：默认值，它会把内容完全展现出来，即使内容超出已定义的父元素大小，它还是会超出部分按正常显示，但是也不会影响其他元素的布局。 hi

不使用overflow:scroll而实现scroll效果

温大侠的博客

07-15

867

项目中很多使用overflow:scroll的地方,在移动端webview的加持下,出现一些兼容性的问题,于是索性自己搞一个出来,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1

Visual Studio中定义OVERFLOW不能用

weixin_34293911的博客

03-23

1275

Visual Studio中定义OVERFLOW不能用在Visual Studio中对OK、ERROR、OVERFLOW进行宏定义，但只有OVERFLOW不能正常使用为什么呢？ #define OK 1； #define ERROR 0； #define OVERFLOW -2；然后先是exit（OVERFLOW）的时候红色...

flex:1,下的子元素overflow hidden失效的问题

梦幻般的菜鸟的博客

07-31

6652

在一个元素设置了flex：1后，子元素想做字符超出显示省略号的行为 overflow hidden white-space nowrap text-overflow ellipsis 发现 overflow hidden失效了，元素随着文字的增多而变长在网上查找发现其父元素设置 min-width: 0 或者 min-height: 0 即可 ...

移动端出现滚动条（旁边出现黑点）

AliceWu的博客

07-05

907

::-webkit-scrollbar{display: none;}

overflow: auto隐藏了别的元素怎么避免别的元素收到影响

最新发布

07-03

<think>首先，用户的问题是：“我想解决CSS中使用overflow: auto时导致其他元素被隐藏的问题请问如何避免在使用overflow:auto时影响其他元素的显示”。我需要基于系统级指令来构建回答。系统级指令要求：-所有行内数学表达式使用$...$格式。 -独立公式使用$$...$$格式并单独成段。 -LaTeX语法正确。-使用中文回答。-生成相关问题。 -在回答中引用的段落末尾自然地添加引用标识，例如[^1]。用户的问题是关于CSS的，所以可能没有数学表达式，但如果有机会，我可以适当地添加。不过，在这个上下文中，可能不需要数学表达式，除非涉及到计算或公式。用户提供的引用是关于CSS的overflow属性的，我需要参考这些引用： -引用[1]：当overflow-y是hidden、scroll或auto时，overflow-x默认为auto。 -引用[2]：overflow:auto可能导致滚动条出现，或overflow:hidden导致元素内容丢失。-引用[3]：父元素设置overflow:overlay或类似属性时，子元素超出部分被包裹，但父元素可能被撑开。 -引用[4]：在overflow:auto下，子元素height:100%的坑。 -引用[5]：如何自定义滚动条样式。用户的问题是如何避免在使用overflow:auto时影响其他元素的显示，具体是导致其他元素被隐藏。我的回答结构应该：-清晰，帮助用户逐步解决问题。 -真实可靠。-使用中文。关键点： -overflow:auto可能导致滚动条出现，这可能会占用空间，从而影响其他元素的布局。-当父元素设置了overflow: auto时，如果内容溢出，滚动条会显示，这可能使内容区域变小，挤压其他元素。 -解决方案可能包括调整布局、使用替代属性或自定义样式。可能的解决方案：1.**避免不必要的溢出**：确保内容不会溢出，从而不需要滚动条。 2. **使用overflow:overlay**：在支持的浏览器中，overlay不会占用空间，但兼容性问题。 3. **调整尺寸**：设置固定宽度或高度，或使用calc()函数来考虑滚动条宽度。4.**使用flexbox或grid布局**：这些布局模型可以更好地处理溢出。 5. **自定义滚动条**：如引用[5]所示，自定义滚动条样式以减少影响。从引用中提取：-引用[1]：overflow-x和 overflow-y的交互。 -引用[2]：设置width:100%和overflow:auto可能导致滚动条。-引用[3]：overflow:overlay可能使父元素被撑开，但实际尺寸不变。 -引用[4]：height:100%在overflow:auto下可能有问题。-引用[5]：自定义滚动条。针对用户问题：避免其他元素被隐藏。可能的原因： -滚动条出现时，内容区域变小，导致相邻元素被推挤或隐藏。-或者，overflow: auto的容器可能裁剪内容，影响子元素。用户说“导致其他元素被隐藏”，可能意味着当滚动条出现时，它占用了空间，使其他元素被覆盖或移出视图。解决方案： -使用overflow: overlay如果可能（但注意兼容性）。 -预留滚动条空间：例如，设置padding-right或width小于100%以容纳滚动条。-使用 CSS变量或JavaScript动态调整。逐步回答：1.**理解问题**：解释为什么overflow:auto会导致其他元素被隐藏。2.**常见原因**：滚动条占用空间。3.**解决方案**：-方法1：使用 overflow: overlay（但仅在某些浏览器支持）。-方法2：调整容器尺寸，例如设置width:calc(100%- scrollbarWidth)。-方法3：使用 flexbox布局，让容器自适应。-方法4：避免溢出，通过内容管理。 4. **代码示例**：提供简单的CSS代码。 5. **注意事项**：浏览器兼容性。生成相关问题：-基于主题，生成3-5个相关问题。引用标识：在回答中引用提供的引用时，添加[^1]、[^2]等。回答结构：-引言：确认问题。-原因解释。 -解决方案列表。 -代码示例。-相关问题。确保语言中文。</think>### 避免使用 `overflow: auto` 时影响其他元素显示的解决方案在 CSS 中使用 `overflow: auto` 时，常见问题包括滚动条出现导致容器尺寸变化、内容被裁剪或相邻元素被挤压隐藏。这通常是由于滚动条占用布局空间引起的（例如，水平滚动条可能使高度增加，挤压下方元素；垂直滚动条使宽度减小，挤压右侧元素）。下面我将逐步解释原因并提供可靠的解决方案，帮助您避免其他元素被隐藏。解决方案基于 CSS 布局最佳实践，并参考了相关技术文档。 #### 问题原因 - **滚动条占用空间**：当容器内容溢出时，`overflow: auto` 会自动显示滚动条。滚动条会减少容器的可用内容区域（content box），导致内部或外部元素被挤压或裁剪[^1][^2]。 - **默认布局行为**：在标准盒模型中，滚动条被视为容器的一部分。如果容器尺寸未预留滚动条空间，例如设置 `width: 100%`，滚动条的出现会“撑开”容器，影响相邻元素的位置[^2][^3]。 - **子元素尺寸问题**：子元素使用百分比尺寸（如 `height: 100%`）时，在 `overflow: auto` 容器中可能计算错误，导致内容溢出或隐藏[^4]。 #### 解决方案：避免影响其他元素以下是几种有效方法，从简单到高级排列。优先推荐方法1或方法2，兼容性好且易于实现。 1. **预留滚动条空间（推荐）** 通过 CSS 调整容器尺寸，提前为滚动条预留空间。例如： - 使用 `calc()` 函数动态计算宽度或高度，减去滚动条的典型宽度（通常 15-20px）。 - 添加内边距（padding）或外边距（margin）来补偿滚动条。 ```css .container { overflow: auto; /* 启用自动滚动 */ width: calc(100% - 17px); /* 预留垂直滚动条宽度，17px 是常见值 */ height: 200px; /* 固定高度避免高度变化 */ padding-right: 5px; /* 可选：额外内边距防止内容被裁剪 */ } ``` **优点**：简单、兼容所有浏览器。**缺点**：滚动条宽度因浏览器而异，需测试调整。 2. **使用 Flexbox 或 Grid 布局** 现代布局模型（如 Flexbox）能自动处理溢出和空间分配，避免挤压其他元素： - 将容器设为 Flex 容器，并允许内容换行或滚动。 - 示例：父元素使用 `display: flex`，子元素设置 `overflow: auto` 并指定弹性尺寸。 ```css .parent { display: flex; /* 启用 Flexbox */ gap: 10px; /* 元素间间距 */ } .child { overflow: auto; /* 仅在需要时显示滚动条 */ flex: 1 1 auto; /* 弹性尺寸，自动适应空间 */ min-width: 0; /* 防止内容溢出挤压其他元素 */ } ``` **优点**：响应式好，滚动条不会影响布局流。**缺点**：旧浏览器（如 IE）需前缀支持。 3. **替换为 `overflow: overlay`（谨慎使用）** `overflow: overlay` 让滚动条浮动在内容上方，不占用布局空间： ```css .container { overflow: overlay; /* 滚动条悬浮，不影响尺寸 */ } ``` **优点**：完全避免空间占用[^3]。**缺点**：仅部分浏览器支持（如 Chrome、Edge），不兼容 Firefox 或 Safari。需备选方案： ```css .container { overflow: auto; /* 回退方案 */ } @supports (overflow: overlay) { .container { overflow: overlay; /* 支持时优先使用 */ } } ``` 4. **自定义滚动条样式** 通过 CSS 伪元素减小滚动条影响，例如隐藏默认条并添加自定义样式： - 使用 `::-webkit-scrollbar` 伪类（WebKit 浏览器）调整滚动条宽度和位置。 ```css .container { overflow: auto; } /* 自定义滚动条，减少空间占用 */ .container::-webkit-scrollbar { width: 8px; /* 窄滚动条宽度 */ background: transparent; /* 透明背景 */ } .container::-webkit-scrollbar-thumb { background: #888; /* 滑块颜色 */ border-radius: 4px; } ``` **优点**：视觉干扰小。**缺点**：仅 WebKit 内核浏览器有效，需搭配其他方法[^5]。 5. **避免内容溢出** 如果可能，优化内容以消除溢出需求： - 使用响应式设计：媒体查询调整内容尺寸。 - 限制子元素尺寸：例如，设置 `max-width: 100%` 或 `white-space: nowrap`。 ```css .container { overflow: auto; /* 安全启用 */ } .content { max-width: 100%; /* 防止内容溢出 */ box-sizing: border-box; /* 包含内边距和边框 */ } ``` #### 注意事项 - **浏览器测试**：滚动条行为因浏览器不同（如 Firefox 与 Chrome），建议使用开发者工具模拟溢出场景。 - **性能影响**：`overflow: auto` 可能导致重绘（repaint），在复杂布局中优先使用 Flexbox/Grid[^1][^3]。 - **备用方案**：组合多种方法，例如 Flexbox + 预留空间，以增强鲁棒性。通过以上方法，您可以有效防止 `overflow: auto` 导致的元素隐藏问题。核心是控制滚动条空间或采用现代布局模型，确保内容自适应。