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

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

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

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            overflow-y: auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="div1">
    内容 内容 内容 内容 内容 内容 内容
    </div>
    <div class="div1">
    内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容
    </div>
</body>
</html>

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

Snipaste_2019-12-19_10-10-05.jpg

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

Snipaste_2019-12-19_10-10-17.jpg

overflow属性知识扩展

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

overflow的取值

描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。
Image placeholder
前端答疑
未设置
  42人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css设置radio不显示小圈

css设置radio不显示小圈选中变红默认情况下,input的type为radio时会显示小圆圈,去除的方法很简单,只需要设置input{-webkit-appearance:none;}即可。设置了

css怎么隐藏滚动条样式?

css怎么隐藏滚动条样式?用到的属性有overflow:hidden,下面,我们用一个案例来说明实现的方法及步骤。1、新建一个html文件,在head中写入内部CSS代码:2、然后再body中添加一个

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

jquery判断是否出现滚动条?

jquery判断是否出现滚动条?一、判断可视区域是否超过实际高度,超过一定存在if($(window).height()=document.body.clientHeight){ alert("页面无

jquer如何判断是否有滚动条?

利用jQueryscrollTop()来控制滚动条滚动,再判断滚动条是否有偏移。如果有,则存在滚动条,相反没有滚动就不存在。 $(function(){ $("body").scrollTop(10)

dw如何使用css设置字体

dw如何使用css设置字体设置页面中的字体可以使用“页面属性”对话框,页面属性可以设置网页的字体、背景颜色和背景图像等样式。具体操作方法如下:1、选择“文件”>“页面属性”,或单击文本的属性检查器中的

css设置边框可以用哪个属性?

css设置边框可以用border简写属性,它可以在一个声明设置所有的边框属性,按照border-width、border-style、border-color顺序设置;也可以单独使用这几个属性来设置边

css设置input不可编辑

css设置input不可编辑给input加上css样式pointer-events:none;即可input{ pointer-events:none; }使用pointer-events来阻止元素成

css设置span标签里text-indent不起作用?

css设置span标签里text-indent不起作用?span标签的text-indent不起作用是因为text-indent只能给块级元素设置,而span标签是行内元素。解决方法是设置span标签

css怎么控制网页内容不让选择和复制?

css怎么控制网页内容不让选择和复制?要想通过CSS禁用页面内容选中和复制操作,需要增加如下代码:-moz-user-select:none; -webkit-user-select:none; -m

jq设置css让元素不显示

jq设置css让元素不显示使用jQuery设置元素的css属性,需要使用.css()方法,具体操作如下:$("#id").css("display","none");//隐藏 $("#id").css

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

css图片在ie8中不显示怎么办?

css图片在ie8中不显示怎么办?css背景图片在ie8中不能显示是因为no-repeat前面缺少空格,添加一个空格,改成background:url(图片地址)no-repeat即可。代码:(相关课

iis不显示css引用的图片?

iis不显示css引用的图片?原因有两个:项目文件夹权限问题未开启IIS的静态内容功能(相关课程推荐:css视频教程)解决方法:1、文件夹权限问题的解决方法项目文件夹→属性→安全→编辑→添加→高级→立

css背景图片调用不显示是什么原因?

css背景图片无法显示,有以下几方面原因:  1、css没有被调用;请检查css调用是否成功。  2、css图片地址不对;请检查css图片地址是否正确。  3、元素的高度没有固定,是auto或者没有设

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

笔记:element固定表头的表格,如果表格太宽了拉到最右侧会出现表头和内容不对齐的情况

在顶级样式文件里面加下面的代码.el-table--borderth.gutter:last-of-type{ display:block!important; width:8px!important

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

为什么说BAT也容不下甲骨文员工?

本文经授权转自AI财经社(ID:aicjnews);撰文 /  牛耕  编辑 /  华记5月10日,中关村软件园24号的甲骨文大厦格外安静。尽管已到中午饭点,其他大楼的员工陆续走出来吃饭,甲骨文大楼却

jQuery快速滚动到页面顶部

jQuery快速滚动到页面顶部使用animate+scrollTop即可实现$('html,body').animate({scrollTop:'0px'},500)animate是jq的一个特效的函

jquery怎么确定滚动事件的方向?

在jQuery中可以使用scrollTop()方法来确定滚动事件的方向,scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法,我们就可以确定滚动方向。下面通过示例来具体看看。