超过一定高度自动显示垂直滚动条
注意: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的后果: