如何定义UL的高度让超过固定高度后自动出现滚动条

mingfang617 2011-07-07 02:13:16

如何定义UL的高度让超过固定高度后自动出现滚动条

.Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:scroll;}

<ul id="tidao" style="" class="Attopic">
<li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('hemin')" value="hemin" class="atinput" id="textfield" name="textfield"></li>
</ul>

我上面定义的在超过100px时出现了滚动条，但是高度没超过100px时也有，怎么让小于100px时不出现滚动条呀?

...全文

4075 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuexiaodong2009 2011-07-07

打赏
举报

overflow：auto;不能显示吗

bestjfliu 2011-07-07

打赏
举报

如楼上
overflow-y:scroll; 换成 overflow-y:hidden;

之前的让它一直显示

挨踢直男 2011-07-07

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
.Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:hidden;}
</style>
</head>
<body>
<ul id="tidao" style="" class="Attopic">
<li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>

<li><input type="text" onclick="elect('hemin')" value="hemin" class="atinput" id="textfield" name="textfield"></li>
</ul>
<script type="text/javascript">
var ul = document.getElementById("tidao");
var childs = ul.childNodes;
var height = 0;
for(var i = 0 ; i < childs.length; i ++)
{
if(childs[i].tagName == "LI") height+=childs[i].offsetHeight;
}
if(height>100) ul.style.overflowY="scroll"
</script>
</body>
</html>