看效果，没有滚动条，超出div，开发中肯定不行。

有滚动条

最后就是想隐藏滚动条

代码

有滚动条并显示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body style="width:229px; height:203px; text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">

     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">

         <div class="inner-containe" style="width:229px; height:203px; overflow:auto;">

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

         </div>

     </div>

 </body>

 </html>

有滚动但是隐藏

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .outer-container{

             width: 229px;

             height: 203px;

             position: relative;

             overflow: hidden;

         }

         .inner-containe{

             position: absolute;

             left: 0;

             top: 0;

             right: -17px;

             bottom: 0;

             overflow-x: hidden;

             overflow-y: scroll;

         }

     </style>

 </head>

 <body style=" text-align:center; padding-top: 50px; margin-left: 480px; background-color: darkkhaki">

     <div class="outer-container" style="border:1px solid #000; background-color: #00B83F">

         <div class="inner-containe" >

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

             <li><span >overflow10</span></li>

             <li><span >overflow11</span></li>

             <li><span >overflow12</span></li>

             <li><span >overflow13</span></li>

             <li><span >overflow14</span></li>

             <li><span >overflow15</span></li>

             <li><span >overflow16</span></li>

             <li><span >overflow17</span></li>

             <li><span >overflow18</span></li>

             <li><span >overflow19</span></li>

         </div>

     </div>

 </body>

 </html>

css设置滚动条并显示或隐藏的更多相关文章

  1. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  2. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  3. CSS设置滚动条样式[转]

    原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

  4. 转载自前端开发：CSS设置滚动条样式

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

  5. webkit下面的CSS设置滚动条

    webkit下面的CSS设置滚动条 1.主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...

  6. 清除webkit浏览器css设置滚动条

    主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...

  7. webkit浏览器css设置滚动条

    主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...

  8. css设置超出部分文档隐藏（在table标签中不好使解决方案在下）

    css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

  9. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

随机推荐

  1. 3、Spring Boot 2.x 核心技术

    1.3 Spring Boot 核心技术 1.3.1 起步依赖 为项目的依赖管理提供帮助.起步依赖其实就是特殊的Maven,利用了传递依赖解析,把常用库聚合在一起,组成几个为特定功能而定制的依赖. 1 ...

  2. harbor批量导出镜像

    工作中遇到一个问题,要把某个项目的harbor镜像库全部迁移到其他环境的harbor上,由于网络不通,只能导出来,传给同事,让同事导入到他们的harbor上: 记录下我的操作方法. 参考博客园的一篇博 ...

  3. border-style

    border-style 语法: border-style:<line-style>{1,4} <line-style> = none | hidden | dotted | ...

  4. 欧几里得？x

    可以去看dalao博客 orz 1.欧几里得算法 带余除法定理:a,b∈Z,其中b>0,存在唯一q及r,使a=bq+r,其中0<=r<b; 辗转相除法(欧几里得算法)依据:(a,b) ...

  5. kubernets安装rabbitmq集群.

    RabbitMQ集群的两种模式 1)普通模式:默认的集群模式,队列消息只存在单个节点上 2)镜像模式:队列为镜像队列,队列消息存在每个节点上 配置同步: 配置同步: 1.Ha mode 同步模式,以下 ...

  6. ZOJ 2592 Think Positive ——（xjbg）

    做法是,先求出前缀和pre.然后枚举端点i,[i+1,n]中pre最小的找出来,减去pre[i-1]大于0,这是第一个条件:第二个条件是,从i开始的后缀和和i之前的最小的一个pre相加大于0.只要满足 ...

  7. Mongodb更新数组$pull修饰符 (mongodb 修改器（$inc/$set/$unset/$push/$pop/upsert))

    mongodb 修改器($inc/$set/$unset/$push/$pop/upsert))   https://www.jb51.net/article/112588.htm http://bl ...

  8. websocket原理、为何能实现持久连接？

    WebSocket 是 HTML5 一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是 ...

  9. Python全国二级等级考试（2019）

    一.前言 2018年9月随着全国计算机等级考试科目中加入“二级Python”,也确立了Python在国内的地位,猪哥相信Python语言势必会像PS那般普及.不久的将来,谁会Python谁就能获得女神 ...

  10. 通过Vagrant搭建PHP环境(一) Vagrant box添加配置

    系统Windows10 Vagrant 1.8.1 VirtualBox 5.0.20 vagrant box下载地址:http://cloud.centos.org/centos/7/vagrant ...