<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
<br/>usb
<br/>usb
<br/>usb
<br/>usb
br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>
===========================
</div>
</div>
---------------------------
<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
<br/>usb
<br/>usbbr/>u2222222222222222222sb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>usb
<br/>
</div>
</div>
</body>
</html>
*********************************************************************************************
overflow-x overflow-y 及overflow:auto
为了不让内容撑开,我用了
语法:
overflow-x: visible | auto | hidden | scroll
参数:
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的宽度。
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象宽度的内容
scroll: 总是显示横向滚动条
overfolw-y与上面overflow-x相似,想要固定垂直高度,出现垂直滚动条的话,只要定义高度和overfolw-y的属性就可以了。
.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的属性就可以了。