Overflow:auto解决scoll 问题

来源：互联网发布：淘宝app修改店铺名称编辑：程序博客网时间：2024/05/29 19:24

<html>
<head>
 <style type="text/css">
 .usb {
 width:100px;
 height:200px;
 }
 </style>
 <title>用户信息</title>
</head>
<body>
 <div class="usb">
 <div style="width:100%;height:100%;overflow:auto;">
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 br/>usb
 usb

usb
 usb
 usb
 usb
 br/>usb
 usb
 usb
 usb
 usb
 usb
 br/>usb
 usb
 usb
 usb
 usb
 usb
 br/>usb
 usb
 usb
 usb
 usb
 usb
 usb
 
 ===========================
 </div>
</div>
 ---------------------------
 <div class="usb">
 <div style="width:100%;height:100%;overflow:auto;">
 usb
 
usb
 
usb

 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usbbr/>u2222222222222222222sb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 usb
 
 </div>
</div>
</body>

</html>

*****************************************************************************************

overflow-x overflow-y 及overflow:auto

为了不让内容撑开，我用了

.box{width:520px; overflow:auto;}

但是这样会出现一个问题，就是横向和竖直滚动条都会出现，因为如果只定义了overflow，竖直滚动条会因为横向滚动条占用的空间而一直出现，后来为了隐藏竖直的滚动条，我这样写

.box{width:520px; overflow:auto;overflow-y:hidden;}

隐藏了竖直滚动条，问题虽然解决了，但是换个角度去想，为什么是让它出现了再隐藏，而不是不让它出现。

.box{width:520px; overfolw-x:auto;}

如果不超过所定宽度，不显示滚动条，超过了宽度只显示横向滚动条，因为没有对竖直滚动overfolw-y定义，所以竖直滚动条也没有出现。

语法：
overflow-x: visible | auto | hidden | scroll

参数：
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象宽度的内容
scroll: 总是显示横向滚动条

overfolw-y与上面overflow-x相似，想要固定垂直高度，出现垂直滚动条的话，只要定义高度和overfolw-y的属性就可以了。

Overflow:auto解决scoll 问题

<html> <head> <style type="text/css"> .usb { width:100px; height:200px; } </style> <title>用户信息</title> </head> <body> <div class="usb"> <div style="width:100%;height:100%;overflow:auto;"> usb <br/>usb <br/>usb <br/>usb <br/>usb <br/>usb <br/>usb br/>usb <br/>usb

overflow-x overflow-y 及overflow:auto

<html>
<head>
<style type="text/css">
.usb {
width:100px;
height:200px;
}
</style>
<title>用户信息</title>
</head>
<body>
<div class="usb">
<div style="width:100%;height:100%;overflow:auto;">
usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
br/>usb
<br/>usb