超过一定高度自动显示垂直滚动条

最新推荐文章于 2024-06-12 07:30:00 发布

最新推荐文章于 2024-06-12 07:30:00 发布 · 1.9k 阅读

文章标签：

#垂直滚动条 #竖直滚动条

javascript 专栏收录该内容

140 篇文章

订阅专栏

本文介绍如何通过CSS设置元素的高度及overflow-y属性来实现超过指定高度时自动显示垂直滚动条的效果，并提供了一个完整的HTML示例。

超过一定高度自动显示垂直滚动条

注意: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>">&lt;script&gt;alert(...
</li><li class="open" value="90001022735" value2="90001022735" title="<script>alert(aaa)</script>">&lt;script&gt;alert(...
</li><li class="open" value="90001022736" value2="90001022736" title="<script>document.write('a')</script>">&lt;script&gt;docume...
</li><li class="open" value="90001022739" value2="90001022739" title="aa<>&quot;">aa&lt;&gt;"
</li><li class="open" value="90001022740" value2="90001022740" title="cc<>&quot;aaa">cc&lt;&gt;"aaa
</li><li class="open" value="90001022741" value2="90001022741" title="aa<>&quot;aaaa">aa&lt;&gt;"aaaa
</li><li class="open open_selected" value="90001022742" value2="90001022742" title="aa<>&quot;rrr">aa&lt;&gt;"rrr
</li><li class="open" value="90001022743" value2="90001022743" title="ccc<>&quot;33aa">ccc&lt;&gt;"33aa
</li><li class="open" value="90001022753" value2="90001022753" title="畅捷通信息技术股份有限公司多四个字">畅捷通信息技术股份有限公司多...
</li></ul>
</body>
</html>

不使用max-height的后果: