您的位置：首页 > 其它

Overflow:auto解决scoll 问题

2016-03-21 17:55 330 查看

<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

为了不让内容撑开，我用了
.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的属性就可以了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航