<head>
<title>
overflow
</title>
<script type="text/javascript" src="
>
<script type="text/javascript">
!window.jQuery && document.write('<script src=
)
</script>
<script>
$(document).ready(function(){
$("#more").toggle(function(){
$(this).text('hidden')
$("#header").css("height","auto").css("overflow","auto")
},function(){
$(this).text("show")
$("#header").css("height","60px").css("overflow","hidden")
})
})
</script>
<style>
#header{
width:96%
height:60px
position:fixed
top:10
left:10
right:10
overflow:hidden
border:1px #ff0 solid
}
.nav{
width:86%
height:100%
position:relative
float:left
margin:10px
border:1px #f00 solid
}
.btn{
width:12%
height:100%
position:relative
float:left
}
.nav ul {
float:left
list-style:none
padding-left:10px
margin:10px
display:block
}
.nav ul li{
float:left
list-style:none
padding: 5px 10px
padding-left:10px
width:120px
height:30px
}
.nav ul li a{
float:left
list-style:none
padding:6px 20px 6px 20px
display:block
border:1px #000 solid
}
.nav ul li a:hover{
float:left
list-style:none
padding:6px 20px 6px 20px
display:block
border:1px #fff solid
background:#999
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li><a>aaaaa</a></li>
<li><a>aaaab</a></li>
<li><a>aaaac</a></li>
<li><a>aaaad</a></li>
<li><a>aaaae</a></li>
<li><a>aaaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaah</a></li>
<li><a>aaaai</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaba</a></li>
<li><a>aaabb</a></li>
<li><a>aaabc</a></li>
<li><a>aaabd</a></li>
<li><a>aaabe</a></li>
<li><a>aaabf</a></li>
<li><a>aaabj</a></li>
<li><a>aaabh</a></li>
<li><a>aaabi</a></li>
<li><a>aaabj</a></li>
<li><a>baaaa</a></li>
<li><a>baaab</a></li>
<li><a>baaac</a></li>
<li><a>baaad</a></li>
<li><a>baaae</a></li>
<li><a>baaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>baaah</a></li>
<li><a>baaai</a></li>
<li><a>baaaj</a></li>
<li><a>baaba</a></li>
<li><a>baabb</a></li>
<li><a>baabc</a></li>
<li><a>baabd</a></li>
<li><a>baabe</a></li>
<li><a>baabf</a></li>
<li><a>baabj</a></li>
<li><a>baabh</a></li>
<li><a>baabi</a></li>
<li><a>baabj</a></li>
<li><a>aaaaa</a></li>
<li><a>aaaab</a></li>
<li><a>aaaac</a></li>
<li><a>aaaad</a></li>
<li><a>aaaae</a></li>
<li><a>aaaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaah</a></li>
<li><a>aaaai</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaba</a></li>
<li><a>aaabb</a></li>
<li><a>aaabc</a></li>
<li><a>aaabd</a></li>
<li><a>aaabe</a></li>
<li><a>aaabf</a></li>
<li><a>aaabj</a></li>
<li><a>aaabh</a></li>
<li><a>aaabi</a></li>
<li><a>aaabj</a></li>
<li><a>baaaa</a></li>
<li><a>baaab</a></li>
<li><a>baaac</a></li>
<li><a>baaad</a></li>
<li><a>baaae</a></li>
<li><a>baaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>baaah</a></li>
<li><a>baaai</a></li>
<li><a>baaaj</a></li>
<li><a>baaba</a></li>
<li><a>baabb</a></li>
<li><a>baabc</a></li>
<li><a>baabd</a></li>
<li><a>baabe</a></li>
<li><a>baabf</a></li>
<li><a>baabj</a></li>
<li><a>baabh</a></li>
<li><a>baabi</a></li>
<li><a>baabj</a></li>
</ul>
</div>
<div class="btn">
<button id="more">show</button>
</div>
</div>
</body>
</html>
js控制滚动条使div在一定区间显示方法步骤。一，新建一个html文件，命名为test.html，用于讲解如何使用JS控制DIV内容的滚动条。
二，在test.html文件内，创建两个div模块，一个div模板包含另一个div模块。
三，在test.html文件内，分别设置两个div模块的id属性为test，ntest。
四，在css中，分别通过id来设置两个div的样式，定义它们的高度、宽度，外部div将overflow属性设置为auto，即超过宽度隐藏，并出现滚动条。注意，内部div的高度、宽度必须比外部div的宽高大，才会出现滚词条。
五，在js中，通过id获得外部div对象，使用scrollTop属性控制垂直滚动条位置为100px，使用scrollLeft属性控制水平滚动条位置为150px。
六，在浏览器打开test.html文件，查看实现的效果。实现在一定区间内显示。
请确认，谢谢。
我不知道js怎样清除浮动，我知道css清除浮动：1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:autozoom:1zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
4.在html页面添加：<div class=’clear’></div>
