开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS max-height和overflow auto始终显示垂直滚动

CSS max-height 和 overflow auto 始终显示垂直滚动

max-height 属性用于限制元素的最大高度。当内容超过容器的 height 时，它会自动显示垂直滚动条。而 overflow 属性用于控制元素在内容溢出时如何显示滚动条。

在 overflow 属性中，auto 意味着如果内容高度超出容器的 height，则显示垂直滚动条。而 scroll 属性表示始终显示滚动条。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        .container {
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque libero id velit laoreet fringilla...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque libero id velit laoreet fringilla...</p>
    </div>
</body>
</html>

在这个例子中，.container 类的元素具有固定的 max-height 为 200px，当内容高度超出时，将自动显示垂直滚动条。

相关搜索:"overflow-x: auto‘无法在CSS网格中处理表格以使其可滚动以获得响应，我该如何修复？CSS / JS:如何默认(!)是否将overflow-x设置为auto的块元素水平滚动到最右侧？CSS Flex，如何显示具有自定义顺序和水平滚动功能的列表 CSS:如何在图像上垂直和水平居中显示文本 CSS:通过overflow: hidden和max-height行高的倍数，“隐藏”文本在Chrome和Edge中渗入视图 CSS缓入缓出不适用于max-height 0和max-height auto HTML iframe在动画过程中显示滚动条，然后消失。CSS overflow属性设置为hidden 为什么css "overflow: scroll“不能工作，滚动条也不显示？停止在页脚上方始终滚动返回顶部按钮纯css和html 具有overflow auto的元素不显示滚动条

相关搜索:

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

有帮助

没帮助

相关·内容

CSS vw让overflow:auto页面滚动条出现时不跳动

应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：信息流页面，如新浪微博，是从上往下push渲染的。...开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。...阿弥陀佛，骚年，请看我手中的这盏灯…… 二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动很简单，只要一行代码就搞定了： .wrap-outer { margin-left: calc...您可以狠狠地点击这里(IE10+)：页面出现滚动条的时候没有跳动demo demo页面中，标题和下面的妹子都是居中效果。...，经过大型项目实践已经验证相当具有可行性，这里特意分享下： html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x

4.3K2 0

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

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。...，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局: /* 父元素设置...box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件块级元素，但不包含浮动和绝对定位元素在默认文档流下只出现在垂直方向...: 20px; margin-left: auto; /* 2 */ margin-right:auto; margin-left: auto; 4.绝对定位元素利用margin:auto实现水平垂直居中...端滚动条宽度约为17px 让页面滚动条不出现晃动的方法: html{ /* ie8 */ overflow-y: scroll; } :root{ overflow-y: auto

2.1K2 0

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。...，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局: ?...其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件块级元素，...margin:auto实现水平垂直居中(兼容到ie8+) ?...端滚动条宽度约为17px 让页面滚动条不出现晃动的方法: html{ /* ie8 */ overflow-y: scroll; } :root{ overflow-y: auto

1.2K1 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

第一个值用于水平轴，第二个值用于垂直轴。 Visible ? overflow 默认值为 visible，其中的内容可以超出其父值。...Auto auto这是一个聪明的关键字，仅当内容比其容器长时才显示滚动条。 ? 注意，在图中，只有当内容比其容器长时，滚动条才可见。...接下来，我们将讨论与overflow相关的longhand属性 Overflow-X 该家伙负责x轴或元素的水平边。 Overflow-Y 该家伙负责y轴或元素的垂直边。...用例和事例简单滑块我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。 ? 在上面的模型中，我们有水平放置的卡片，还有一个滚动条，可以滚动并显示更多内容。...我使用`auto`是因为它在内容足够长之前不会显示滚动条 */ .modal__content { flex-grow: 1; /* [1] */ overflow-y: auto; /

4.1K2 0

纯CSS实现拖拽--resize、scale、包裹性

今天看了一篇关于 CSS 的文章，文章用到的几个点，想和大家聊聊。附「原文地址」大家可自己查阅。...属性值说明 none 不可以缩放 both 水平和垂直方向上均可调整元素的大小 horizontal 在水平方向上调整元素的大小 vertical 在垂直方向上调整元素的大小注意：块元素 overflow...overflow 指定除 visible (默认值)以外的值（hidden/scroll/auto）将创建一个新的块级格式化上下文(BFC)。...这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。...显示拖拽条由于完全隐藏了滚动条，用户也就不知道可以拖拽了，所以我们还需要绘制一个更为好看的拖拽条。

3.4K2 0

纯CSS实现拖拽--resize、scale、包裹性

今天看了一篇关于 CSS 的文章，文章用到的几个点，想和大家聊聊。附「原文地址」大家可自己查阅。...属性值说明 none 不可以缩放 both 水平和垂直方向上均可调整元素的大小 horizontal 在水平方向上调整元素的大小 vertical 在垂直方向上调整元素的大小注意：块元素 overflow...overflow 指定除 visible (默认值)以外的值（hidden/scroll/auto）将创建一个新的块级格式化上下文(BFC)。...这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。...显示拖拽条由于完全隐藏了滚动条，用户也就不知道可以拖拽了，所以我们还需要绘制一个更为好看的拖拽条。

3K1 0

CSS深入理解学习笔记之overflow

兼容性：　　　　①滚动条外观不同；　　　　②宽度设定机制不同。 ? 　　　　因为IE7下width宽度计算为整400px，然而垂直滚动条占用了部分宽度，所以出现了水平滚动条。...overflow:visible妙用： ? 2、Overflow与滚动条滚动条的出现条件：①auto/scroll；②内容超过盒子。...; //IE7- 伪BFC特性 } 4、overflow与absolute绝对定位　　在absolute定位下，overflow隐藏和滚动会失效。　　...的样式表现　　CSS3的resize属性，起作用的前提是overflow不能是visible。　　...滚动条的尺寸也是17px。　　文本溢出省略号显示属性text-overflow:ecllipsis。前提是white-space:nowrap以及overflow:hidden。

4K5 0

42个来自《 CSS世界》中的实用技巧

-- CSS --> div { max-height: 0; overflow: hidden; transition: max-height...如果使用padding留白，在Firefox和IE不会显示。...-- CSS --> .box { height:200px; overflow:auto; } .box>img {...: 40px; height: 40px; } 27、利用溢出：隐藏自定义滚动条实际上overflow：hidden是可以滚动的，可以通过锚点，focus，...隐藏目的是为了不影响主体的体验，而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素，同时绝对定位元素和overflow容器同时也没有定位元素，则溢出无法对绝对定位元素进行剪裁。”

1K1 0

移动页面滚动穿透解决方案（荐）

移动页面滚动穿透解决方法目前有多种解决方案，我介绍下几种方案：解决方案1：阻止冒泡。..."> .modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3...:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333...--一个未知宽高的弹出框，水平垂直居中--> <...body{overflow:hidden;} 其次，设置 JS ，再点击按钮之后，将body 的 overflow:initial 即可。

6223 0

Height transition

鼠标hover时使一个未知高度元素的高度从0过渡到auto。 ? 本实现的思路是：通过js提前将元素的scrollHeight保存在CSS变量--max-height中。...0.5s; overflow: hidden; max-height: 0; } .trigger:hover > .el { max-height: var(--max-height)...-overflow：hidden防止超出max-height范围内的子元素内容溢出容器。 -max-height：0指定元素初始的最大高度为0。...-.target：hover> .el指定当hover父级元素时，使其子节点.el的max-height为CSS变量--max-height的值。...-el.scrollHeight指元素包含滚动部分的高度，它将根据元素的内容动态变化。

1.2K3 0

CSS进阶知识

css可继承与不可继承的属性无继承性的属性 display：规定元素的显示类型文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow...也可以使用css属性调整图片显示位置，或者使用background来调整亦可。...; //子元素margin:auto;或者margin:0 auto;均可 } /* 也可用于多行文本垂直居中，直接编写文本即可。...Overflow overflow: auto|visible|hidden|scroll|inherit; auto 自动产生滚动条，哪个方向超出了就出现滚动条。...visible 不显示滚动条，但是超出部分会显示。 hidden 不显示滚动条，超出部分不会显示。 scroll 显示滚动条，就算某个方向没超出也会显示。

2071 0

如何使用 CSS 设置和自定义水平和垂直滚动条

例如，您可以定制滚动条样式以匹配网站的外观和感觉。在本文中，我们将讨论何时设置水平和垂直滚动条，如何设置它们以及如何使用CSS自定义它们的外观。...下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...overflow-y属性接受两个值之一：scroll或auto。将属性的值设置为scroll会指示浏览器始终向容器添加滚动条。无论目标容器是否有超出其边界的内容，容器始终会有一个滚动条。...另一方面，如果将overflow-y属性的值设置为auto，则浏览器只有在目标容器有超出内容时才会添加滚动条。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。

1.4K0 0

css 如何把元素固定在容器底部？（四种方式）

但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了 relative 来限制 absolute，然后 bottom: 0，但是在内容过长的时候会导致显示异常。所以我们需要做内部滚动。...如果做内部滚动，那么我们只要可以撑开盒子即可。不需要绝对定位了使用 flex 实现父级使用 flex 布局，column 垂直排列。...: auto; } calc 实现如果不使用 flex ，那么我们可以用 calc 来减去 header 和 footer 空间。... .demo3{ position: relative; } .demo3 .content{ overflow: auto;...; bottom: 0; } .demo4 .content{ overflow: auto; height: 100%;

7061 0

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置... 没有垂直滚动条没有滚动条...没有水平滚动条没有垂直滚动条 <textarea style="<em>overflow</em>-y...body页面不使用<em>滚动</em>条，只在某个div内使用<em>滚动</em>条先说说正常<em>显示</em>的，<em>显示</em><em>滚动</em>条<em>和</em>不<em>显示</em><em>滚动</em>条，效果图如下：代码： iframe 中<em>始终</em><em>显示</em><em>滚动</em>条： Your

4.6K3 0

CSS大部分属性汇总

缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制文本大小写转换 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐...max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。...sticky 基于用户的滚动位置来定位。 CSS溢出属性 css有一个属性专门控制元素内容溢出的处理：Overflow 值描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...inherit 规定应该从父元素继承 overflow 属性的值。 CSS浮动属性描述值 clear 指定不允许元素周围有浮动元素。

1.2K2 0

灵活运用CSS开发技巧

在线演示使用overflow-x排版横向列表要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看场景：横向滚动列表、元素过多但位置有限的导航栏...在线演示 Behavior Skill 使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling...:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度场景：iOS页面滚动兼容：iOS自带-webkit-overflow-scrolling body { -webkit-overflow-scrolling...: touch; } .elem { overflow: auto; } 使用transform启动GPU硬件加速要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题...在线演示使用max-height切换自动高度要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换场景：隐藏式子导航栏、悬浮式折叠面板兼容：max-height

4.6K2 0

CSS 魔法 | 超强的文本超出提示效果

img 这里 title 的表现样式还有停留时间与操作系统和浏览器有关，也不可修改现在问题来了，title 属性是预先添加的，并且无法通过样式来控制是否显示，那么，CSS 如何做到动态处理呢...但是，如果我们限制文本A的最大高度为两行，那么一行和多行不就区分开了吗（单行高度是1.5em，多行高度是3em） .txt{ display: block; max-height: 3em;/*...*/ } 在线例子可访问codepen auto scroll list[8]（记得鼠标放上去o~）唯一的缺陷是动画时间是固定的，如果文本很长，可能出现滚动过快的问题四、总结和说明本文介绍了一种全新...由于只用到了CSS2 相关特性（max-height、文本截断等），兼容性也是棒棒的，实测可以兼容到 IE7+（全兼容，放心使用），后面的超出滚动效果兼容到 IE10+ ，现在总结一下实现重点：转换思路...，节点复制是一个好办法通过 max-height 可以判断单行和多行灵活运用 CSS 障眼法层级覆盖和超出隐藏 direction：rtl 可以实现前置省略号的效果中间省略号可以用两段文本拼接

2K1 0

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

我们在CSS布局时，是按照设计师的效果来开发的，但是实际的网页内容是动态的，网页上的内容是可以改变的，如：文字数量，图片尺寸、窗口大小等，再加上用户的一些意想不到的行为和运行环境，从而造成CSS布局的效果并没有按照我们预期的效果显示...: 100%; /*以防万一，用户内容不足时，不需要显示滚动条，只有内容溢出时才显示*/ overflow-y: auto; } /* 整个滚动条*/ .content...没有加scrollbar-gutter时，未出现滚动条和出现滚动条之间的差别加上scrollbar-gutter:stable;后，出现滚动条和没有出现滚动，前后文字显示效果没有差异...: 100%; /*以防万一，用户内容不足时，不需要显示滚动条，只有内容溢出时才显示*/ overflow-y: auto; /*预留好滚动条位置，必免引起重排*/...; overflow-y: auto; background-color: skyblue; /*当滚动到滚动条底部和顶部时，会触发父元素的滚动条滚动*/

1.8K0 0

【云+社区年度征文】2020一网打尽CSS世界

设置line-height大小和height高度一样可以让内联元素垂直居中，是因为css中“行间距的上下是等分机制”！...min-width/min-height的初始值是auto，max-width/max-height的初始值是none。...区别方式：父级容器添加overflow: auto;，层叠区域超出父级容器时，有滚动条则会影响尺寸，没有则纯视觉。...原因：Chrome浏览器是子元素超过content box尺寸触发滚动条显示；而IE和Firefox浏览器是超过padding box尺寸触发滚动条显示 margin合并相邻兄弟元素margin合并；...根元素； float的值不为none； overflow的值为auto、scroll或hidden； display的值为table-cell、table-caption和inline-block

5K1 1

css控制滚动条透明,CSS控制滚动条样式的解析

3、必须添加属性 “overflow：auto”。...使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。 overflow：auto；在需要时剪切内容并添加滚动条。...overflow：hidden；不显示超过对象高度的内容。 overflow：scroll；总是显示纵向滚动条。...任何超出”width”和”height”的内容都会不可见。 scroll 无论内容是否超越范围，都将显示滚动条。...相信通过本文的学习，小伙伴们对css控制滚动条样式，有了进一步的了解和认识，希望对你的工作有所帮助！

5.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭