您的位置:首页 > CSS入门 > 【 返回上一页

css overflow:auto超出高度或宽度出现滚动条

css设置overflow:auto后超出高度或宽度出现滚动条

当对象元素设置overflow:auto后,如果对象内的内容(图片或文字或其它元素内容)超出限制高度或宽度后将会出现滚动条。如果超过宽度那么对象底部X横向出现滚动条,如果超过高度那么对象盒子左侧出现下拉滚动条。

overflow设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条、还是隐藏剪切超出内容。

overflow:auto——自动出现滚动条

一、overflow:auto生效要素:

要让此CSS样式生效,那么要么设置宽度、要么设置高度、要么设置宽度又同时设置高度,这样才会让浏览器去判断超出限制宽度或高度时出现滚动条。

二、div css overflow auto实例

1、overflow auto实例完整HTML+CSS代码:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow auto实例 ThinkCSS</title>
<style>
.expa,.expb{ float:left; height:100px; width:100px; border:1px solid #F00}
.expb{ overflow:auto; border:1px solid #00F}
</style>
</head>
<body>
<div class="expa">ThinkCSS测试内容 设定高度和宽度后,如内容超过了宽度或者高度后,就会出现滚动条,不超出的话就不显示</div>
<div class="expb">设定高度和宽度后,如内容超过了宽度或者高度后,就会出现滚动条,不超出的话就不显示</div>
</body>
</html>

以上设置两个DIV盒子,设置相同CSS 宽度CSS高度,同时一个设置红色边框样式,一个蓝色边框以便观察实例效果。对.expb设置overflow:auto。同时两个DIV装过多文字。

2、overflow:auto div css实例效果截图


css overflow auto实例效果截图

第一个class=expa只设置宽度高度,当内容过多就溢出超出并没有显示滚动条,而第二个class=expb设置宽度高度同时设置overflow:auto,由于内容过多所以出现滚动条。

以上实例使用DIV标签布局,当然布局时其它标签均可设置overflow:auto样式。

三、overflow:auto使用总结

对对象盒子设置overflow:auto很少使用,根据需求选择使用,什么时候下边底部出现滚动条,一般遇到不换行连续字母数字或代码会出现横向滚动条,当然如果对象盒子里放图片过宽,超过了盒子设置宽度对象底部X横向也会出现滚动条的。

相关标签: overflow auto
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css/1026.shtml

日期:2016-08-16 22:28:33 来源:未知 作者:ThinkCSS

热门点击