超过一定高度自动显示垂直滚动条
注意:IE8支持max-height属性
显示垂直滚动条的要点:
(1)设置元素的高度
(2)设置overflow-y为auto
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Title</title>
<style>
ul.tag_options {
list-style: none;
width: 228px;
font-size: 12px;
padding: 10px;
position: absolute;
z-index: 999;
border: 2px solid #1b23e8;
border-top: 0;
background: #fff;
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
}
ul.tag_options li {
width: 202px;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #333;
padding: 0 10px;
display: block;
border-radius: 3px;
}
.tag_options li {
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<!--IE8 支持max-height-->
<ul class="tag_options"><li class="open" value="90001016868" value2="90001016868" title="ddddd123">ddddd123
</li><li class="open" value="90001016869" value2="90001016869" title="测试增购后开始时间不对">测试增购后开始时间不对
</li><li class="open" value="90001016870" value2="90001016870" title="测试续购之后增购520">测试续购之后增购520
</li><li class="open" value="90001016898" value2="90001016898" title="aaaaa233">aaaaa233
</li><li class="open" value="90001021469" value2="90001021469" title="测试all in one">测试all in one
</li><li class="open" value="90001021619" value2="90001021619" title="企业名称会置灰吗">企业名称会置灰吗
</li><li class="open" value="90001021620" value2="90001021620" title="现在应该不会置灰了吧">现在应该不会置灰了吧
</li><li class="open" value="90001021968" value2="90001021968" title="1111fdfdf">1111fdfdf
</li><li class="open" value="90001022734" value2="90001022734" title="<script>alert(111)</script>"><script>alert(...
</li><li class="open" value="90001022735" value2="90001022735" title="<script>alert(aaa)</script>"><script>alert(...
</li><li class="open" value="90001022736" value2="90001022736" title="<script>document.write('a')</script>"><script>docume...
</li><li class="open" value="90001022739" value2="90001022739" title="aa<>"">aa<>"
</li><li class="open" value="90001022740" value2="90001022740" title="cc<>"aaa">cc<>"aaa
</li><li class="open" value="90001022741" value2="90001022741" title="aa<>"aaaa">aa<>"aaaa
</li><li class="open open_selected" value="90001022742" value2="90001022742" title="aa<>"rrr">aa<>"rrr
</li><li class="open" value="90001022743" value2="90001022743" title="ccc<>"33aa">ccc<>"33aa
</li><li class="open" value="90001022753" value2="90001022753" title="畅捷通信息技术股份有限公司多四个字">畅捷通信息技术股份有限公司多...
</li></ul>
</body>
</html>
不使用max-height的后果:
相关推荐
这种设置不会隐藏垂直滚动条，如果页面内容超出视口的高度，垂直滚动条仍然会出现。 对于页面内部的某些特定元素，如表格(table)，可能也需要进行类似的设置。如果表格嵌套在具有滚动条的div元素内，则需要确保该...
滚动条分为垂直滚动条（VScroll）和水平滚动条（HScroll），通常在需要时自动显示或隐藏。 在易语言中，为超级列表框添加滚动条涉及到以下几个关键步骤： 1. **创建超级列表框**：在易语言的程序设计界面中，从...
对于垂直滚动条，可以使用`overflow-y: hidden;`。不过，隐藏滚动条可能导致用户无法查看超出视口的内容。因此，在实际应用中，我们通常会结合高度自适应来确保所有内容都能在没有滚动条的情况下显示： ```css ...
这样，当内容超出`ScrollableGroupBox`的边界时，`ScrollViewer`就会自动显示滚动条。 ```csharp public void AddControl(Control control) { scrollViewer.Content = control; } ``` 4. **调整大小和布局**：...
在Flex容器上，如果`overflow`属性设置为`auto`或`scroll`，则会在需要时显示水平或垂直滚动条。例如： ```css .container { display: flex; overflow: auto; /* 或 'scroll' */ } ``` 这种方式简单易用，但...
本教程将重点讲解如何在 DataTables 中实现垂直滚动条，以解决当表格内容过多，无法在有限的屏幕空间内完全显示时的问题。 首先，我们需要确保已经正确地引入了 DataTables 的相关库文件。这包括 jQuery 库、...
这表示当容器内的内容高度超出设定的`height`值时，自动显示垂直滚动条；反之，则不显示滚动条。 例如，在CSS中设置： ```css #m_comment { overflow-y: auto; height: 400px; } ``` 这种方式适用于内容高度不...
为了实现无滚动条的垂直滚动效果，我们可以使用CSS来隐藏默认的滚动条： ```css #scrolling-text { overflow-y: scroll; scrollbar-width: none; /* 针对Firefox */ -ms-overflow-style: none; /* 针对IE和Edge *...
jQuery Sly滚动条插件是一款强大的JavaScript库，专为创建具有高度自定义功能的横向和垂直滚动条而设计。它提供了一种优雅的方式来管理和显示大量内容，尤其在网页设计中，当内容超过屏幕区域时，滚动条是必不可少的...
对于窗口类的滚动条显示，可以在“窗口属性编辑器”中找到“水平滚动条”和“垂直滚动条”选项，将这两个选项设为“否”，即可禁止窗口显示滚动条。 2. **控件属性设置**：对于窗口内的控件，如文本框、列表框等，...
`overflow-y: auto` 会在内容需要时显示垂直滚动条，`overflow: visible` 则允许内容超出元素边界，不显示滚动条。 JavaScript版本的解决方案可以利用`scrollHeight`属性，它返回元素的总高度，包括不可见部分（如...
本教程将深入探讨如何创建一个仿1号店垂直滚动广告条的自定义View。这个功能通常用于展示促销信息或者公告，能吸引用户的注意力并提供良好的交互体验。 首先，我们从声明变量开始。在实现这个自定义View时，我们...
2. 垂直滚动条：用于垂直方向的滚动，通常出现在内容高度超过窗口高度的情况。 3. 自动隐藏：根据内容是否超出视口范围，滚动条可以自动隐藏或显示。 4. 滚动条的组成部分包括轨道（track）、滑块（thumb）、箭头...
- 记得在布局XML文件中设置TextView的`scrollbars`属性，以便显示滚动条，如`android:scrollbars="vertical"`。 - 在使用`Scroller`或`ValueAnimator`时，要确保滚动的持续时间合理，过短可能看不到滚动效果，过长会...
3. 添加CSS样式：为表格设置固定宽度和高度，然后为`<tbody>`添加垂直滚动条。 ```css #scrollingTable { width: 100%; height: 300px; overflow-y: auto; /* 添加垂直滚动条 */ } ``` 4. 使用jQuery：在文档加载...
此外，AS3滚动条还可以实现两种模式：水平滚动条（HORIZONTAL）和垂直滚动条（VERTICAL）。它们的布局和计算方式略有不同，但基本原理相同。对于横向滚动条，值通常对应于X轴的位置，而对于纵向滚动条，则对应Y轴。 ...
总结来说，Android垂直滚动主要涉及`ScrollView`组件的使用，包括基本用法、自动滚动、改写以及与嵌套滚动相关的优化。通过理解并熟练掌握这些知识点，开发者可以构建出更加流畅、用户体验良好的Android应用。
滚动条有两种类型：水平滚动条（Horizontal ScrollBar）和垂直滚动条（Vertical ScrollBar），通常与文本编辑框配合使用。 联动意味着当用户在滚动条上进行操作时，编辑框中的文本会相应地移动，反之亦然。这种功能...
XtraScrollableControl能够自动计算何时需要显示滚动条，以及它们的大小。通过`HorizontalScrollbar`和`VerticalScrollbar`属性，可以控制滚动条的可见性。同时，`AutoScrollMinSize`属性用于指定触发自动滚动的...