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，当内容高度超出时，将自动显示垂直滚动条。
相关·内容
它显示为div中只有一行。如果我设置div的高度，当我输入的内容比它的高度多时，它仍然保持原来的大小。当内容需要在div中占用更多空间时，如何添加垂直滚动条？谢谢。
浏览 3提问于2011-07-15得票数 16
回答已采纳
我想在我的网站上显示条款和条件说明。我不想使用文本字段，也不想使用我的整个页面。我只想在选定的区域显示我的文本，并且只想使用垂直滚动条来向下阅读所有文本。目前，我正在使用以下代码： text text text text text text text texttext text text text text
text text text text tex
浏览 86提问于2010-04-02得票数 148
回答已采纳
5回答
我正在寻找一个好的语法高亮为我的网站，使用PHP & MySQL和Jquery。一个语法高亮笔，它不会让代码重叠，但允许用户在stackoverflow上像这里一样滚动。
浏览 0提问于2010-11-04得票数 3
5回答
我希望对话框展开以显示行，最大垂直大小(350px)，在这一点上它应该显示垂直滚动条。如果高度超过350px，如何强制垂直滚动条？
浏览 4提问于2012-05-12得票数 9
回答已采纳
3回答
有没有办法给'td‘标签添加一个滚动条？我在'td‘标签中有一个动态内容。我希望'td‘的大小是固定的，如果内容变得大于'td’的大小，我希望滚动条只出现在那个特定的单元格上。有没有办法做到这一点？
浏览 0提问于2013-01-03得票数 36
回答已采纳
不幸的是，我不能让滚动在p对话框上工作。由于某些原因，执行<p-dialog [style]="{'margin':'80px', 'overflow':'scroll'}">只会在模式对话框上创建一个水平滚动条。更糟糕的是，滚动仍然在背景上工作，我希望它是静态的。另请参阅柱
浏览 0提问于2017-05-28得票数 5
回答已采纳
我有一个div，样式如下: height:250px;scroll:auto；我想它滚动后250像素，但应该有高度根据它的内容。例如，如果其中的内容是100px，那么div的高度应该是100，而不是滚动。但是，如果高度超过250px，它应该显示滚动。
怎么才能做到呢？
浏览 2提问于2011-02-18得票数 24
下面是一个非常简单的流畅的代码模板，我在其中避免了这个布局在大显示器上变得太宽，而最小宽度可能是希望的，以防止这个布局变得太窄。容器包围所有其他div，给它们提供基于百分比的宽度。{ max-width: 1260px; background: #FFF;}
当浏览内容较少的页面时，正文不会收缩、移动或抖动(因为滚动条不会出现)。当在不同类型的页面之间浏览时(低内容-没有滚动条和<
浏览 3提问于2012-04-05得票数 1
现在，我正在尝试显示垂直滚动条，以便在查找的项目列表中滚动。滚动条显示在桌面浏览器上，但不显示在Android设备上。我的css看起来像这样：
.ui-autocomplete { max-height: 100px; overflow-y: auto; /\* prevent horizontal scrollbar \*&#x
浏览 0提问于2013-02-18得票数 0
回答已采纳
什么是最简单/最好的解决方案，让它可以显示所有行和重叠包含的div。我的CSS background-color: #79BE28; box-shadow: 0 4px 4px #CCCCCC;}<div id="appendTo">
<div class="auto
浏览 2提问于2014-06-02得票数 1
回答已采纳
/div></html>float:left;}float:right;}我的意思是，当我滚动左边的div时，右边的div不需要一起滚动。
浏览 3提问于2020-02-25得票数 0
现在，我尝试显示垂直滚动条来滚动浏览已查找项目的列表。滚动条显示在桌面safari上，但不显示在iPAD safari上。我的css看起来像这样： .ui-autocomplete max-height: 100px;
overflow-y: auto;/* prevent horizontal scroll
浏览 2提问于2012-02-16得票数 1
回答已采纳
4回答
根据示例，bootstrap只支持开箱即用的垂直滚动和文字包装的<pre>块。我如何才能让我拥有水平滚动的、未包装的代码块呢？
浏览 0提问于2012-04-30得票数 60
回答已采纳
我正在使用jQuery的hover()助手将一些行为附加到具有max-height和overflow:auto CSS属性的<ul>中的overflow:auto元素。当<ul>的高度超过max-height并且出现垂直滚动条时，将鼠标悬停在<li>元素上会触发mouseOver，但是如果我移动到滚动条的右侧并开始用鼠标滚动，则mouseOut事
浏览 0提问于2009-08-21得票数 1
回答已采纳
7回答
我这样做是为了最初隐藏body滚动条，然后在单击链接时显示它：$('#site').click(function(e) {$('#wrapper').remove();
浏览 0提问于2012-03-26得票数 7
回答已采纳
是否有任何方法可以隐藏div的滚动条，例如溢出:隐藏；如果div 的内容没有溢出，就好像我说得通:-)。. // dunno how to add "Overflow:hidden" to to hide scroll bar
浏览 3提问于2014-02-03得票数 1
回答已采纳
要求是(自动垂直滚动条而不是水平滚动条)：
.container { max-height: 50px;min-width: 70px;
代码在IE (10)中工作，但是当垂直滚动条出现时，
浏览 9提问于2013-04-17得票数 3
2回答
我有一个div容器，它居中(通过页边距-左:自动和边距-右:自动)和页面设计看起来很好加载...在这个div下面还有另一个隐藏的div，它在用户请求时显示。但是当这种情况发生时，浏览器滚动条就会出现，把我的设计搞得一团糟，因为居中的div也会向左移动几个像素(所以它可以再次居中)。
这种行为可以停止吗？另一种解决方案是添加overflow-y:scroll，但我发现overflow-y并不是所有浏览器都支持，我找不到哪种浏览器支持...有人可以发布一个链接，在那里我可以看到css
浏览 0提问于2011-02-26得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
