看效果，没有滚动条，超出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. ZooKeeper - 攘外安内的多面管理员

    Zookeeper 作为分布式协调框架,在实际生产中有着不可替代的位置,它作为管理框架,大多数时间是不需要我们去维护的.也正是由于它是协调全局的管理者,所以它的一些内部原理我们还是要了解的. 今天我们 ...

  2. 016_STM32程序移植之_舵机

    STM32程序移植之舵机PWM测试 接线图如下: STM32引脚 舵机引脚 功能 GND GND 正极电源 具体看舵机的额定电压 PA6 PWM引脚 STM32引脚 CH340引脚 GND GND 3 ...

  3. E.Substring Reverse Gym - 101755E

    Substring Reverse Problem Two strings s and t of the same length are given. Determine whether it is ...

  4. Dubbo——配置

    一.配置原则 JVM 启动 -D 参数优先,这样可以使用户在部署和启动时进行参数重写,比如在启动时需改变协议的端口. XML 次之,如果在 XML 中有配置,则 dubbo.properties 中的 ...

  5. linux安装过程中遇到的一些问题总结

    后面持续更新 1.安装之后查看显示一直连不上网 vim /etc/sysconfig/network-scripts/ifcfg-eth0 然后应该就可以上网了 2.linux窗口无法适应虚拟机窗口 ...

  6. cesium billboard跨域问题1

    群里小伙伴问道使用billboard加载图片时出现跨域问题,一般认为在服务器端设置 Access-Control-Allow-Origin: * 例如用tomcat发布图片服务,可以这样设置:http ...

  7. 感知机与BP神经网络的简单应用

    感知机与神经元 感知机(Perceptron)由两层神经元组成(输入层.输出层),输入层接收外界输入信号后传递给输出层,输出层是M-P神经元,亦称“阈值逻辑单元”(threshold logic un ...

  8. vue devtools无法使用

    vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...

  9. Windows下的Jupyter Notebook 安装与自定义启动

    1.Jupyter Notebook 和 pip 为了更加方便地写 Python 代码,还需要安装 Jupyter notebook. 利用 pip 安装 Jupyter notebook. 为什么要 ...

  10. ybatis 逆向工程 自动生成的mapper文件没有 主键方法

    1.数据表没有设置主键 设置个主键就好 2.在mybits配置文档里设置了某些属性值为false 在mybatis配置文档里查看 enableSelectByPrimaryKey="true ...