1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html内容超出不自动滚动 css设置div滚动条内容不超过就不显示

html内容超出不自动滚动 css设置div滚动条内容不超过就不显示

时间:2022-03-11 19:43:07

相关推荐

html内容超出不自动滚动 css设置div滚动条内容不超过就不显示

css设置div滚动条内容不超过就不显示

实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,否则不显示滚动条。

示例:

Document

.div1{

width: 100px;

height: 100px;

overflow-y: auto;

border: 1px solid #000;

}

内容 内容 内容 内容 内容 内容 内容

内容 内容 内容 内容 内容 内容 内容

内容 内容 内容 内容 内容 内容 内容

内容 内容 内容 内容 内容 内容 内容

内容没有超出时,不显示滚动条的效果:

内容超出时,显示滚动条的效果:

overflow属性知识扩展

overflow 属性规定当内容溢出元素框时发生的事情。

overflow的取值值描述

visible默认值。内容不会被修剪,会呈现在元素框之外。

hidden内容会被修剪,并且其余内容是不可见的。

scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

本文来自css3答疑栏目,欢迎学习!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。