看效果，没有滚动条，超出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. npm install、npm install --save与npm install --save-dev (转）

    仅供学习参考,侵权删 以npm安装msbuild为例: npm install msbuild: 会把msbuild包安装到node_modules目录中 不会修改package.json 之后运行n ...

  2. Turbo编码

    在做项目时,观察到师兄代码中的Turbo编码过程,不是很理解,把实现过程分享出来,原理则参考引用链接: 以512长原始数据为例,按照LTE标准的1/3码率对其编码,编码后的数据为(1548,512), ...

  3. Oracle 后台进程（三）LGWR进程

    一.LGWR进程简介 LGWR,是Log Writer的缩写,也是一种后台进程.主要负责将日志缓冲内容写到磁盘的在线重做日志文件或组中.DBWn将dirty块写到磁盘之前,所有与buffer修改相关的 ...

  4. 牛客练习赛53 (C 富豪凯匹配串) bitset

    没想到直接拿 bitset 能过 $10^8$~ code: #include <bits/stdc++.h> #define N 1004 #define setIO(s) freope ...

  5. MySQL实现计算两点之间的距离

    DELIMITER $$ CREATE FUNCTION `calculateLineDistance`(startLng double, startLat double, endLng double ...

  6. rxjs——subject和Observable的区别

    原创文章,转载请注明出处 理解 observable的每个订阅者之间,是独立的,完整的享受observable流动下来的数据的. subject的订阅者之间,是共享一个留下来的数据的 举例 这里的cl ...

  7. JAVA基础知识|抽象类与接口类

    一.抽象类 抽象类:拥有抽象方法的类就是抽象类,抽象类要使用abstract声明 抽象方法:没有方法体的方法,必须要使用abstract修饰 为什么要使用抽象类,抽象方法? 举例来说,如果你定义了一个 ...

  8. MySQL的概述和基础（学习整理）

    1. 数据库基本概念 数据库(DataBase,DB)是用来存储和管理数据的仓库.与其他种类存储和管理数据的方式有所不同的是,数据库是兼持久化存储数据.便捷存储管理数据.使用统一的方式操作数据库几个特 ...

  9. geth run

    geth --networkid 1201 --rpc --rpcapi eth,net,web3,personal,admin,miner --rpccorsdomain "*" ...

  10. idea 使用maven 下载源码包

    方式1:全量下载源码包 方式二:下载单个源码包 随便找个源码可以看到文件上有download (标识下载源码包) choose sources表示选择那个版本的源码包