看效果，没有滚动条，超出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. VSCode：使用GIT

    准备:安装GIT.安装VSCode.GitHub上添加 1.初始化 新建本地文件xmai # 全局配置加上命令--global ,如果只想在本文件夹则去掉此参数即可: > git init &g ...

  2. 013_使用 user.txt 文件中的人员名单,在计算机中自动创建对应的账户并配置初始密码

    for i in `cat user.txt`do    useradd $i    echo "123456" | passwd --stdin $idone

  3. .NET调用AS/400上的程序(.NET CALL AS/400 PGM)

    http://www.3rgb.com/entry/dotnet_call_as400_program2 .NET连接AS400出现[Safe handle has been closed http: ...

  4. Axios的params与data的

    Axios发送请求时params和data的区别  https://www.cnblogs.com/cwzqianduan/p/8675356.html(copy 在使用axios时,注意到配置选项中 ...

  5. LOJ #121. 「离线可过」动态图连通性 LCT维护最大生成树

    这个还是比较好理解的. 你考虑如果所有边构成一棵树的话直接用 LCT 模拟一波操作就行. 但是可能会出现环,于是我们就将插入/删除操作按照时间排序,然后依次进行. 那么,我们就要对我们维护的生成树改变 ...

  6. D. AB-string （ 思维 ）

    传送门 题意: 给你一个长度为n的字符串, 字符串只由 A B 组成. 问你这个字符串存在多少个 good string: ( 连续的一段子串 ) good string 的定义就是: 字符串中所有的 ...

  7. [POI] 大都市meg

    http://www.lydsy.com/JudgeOnline/problem.php?id=1103 树剖边权转点权,vector存图卡一下午RE 气炸.. #include <iostre ...

  8. cmake 学习-cmakelists.txt

    #设置库的路径,电脑里有qt4以及qt5,使用qt5时 设置qt5的环境变量(路径). set(CMAKE_PREFIX_PATH $ENV{QTDIR}) #设定工程名称 Project(prona ...

  9. 8月清北学堂培训 Day4

    今天上午是赵和旭老师的讲授~ 概率与期望 dp 概率 某个事件 A 发生的可能性的大小,称之为事件 A 的概率,记作 P ( A ) . 假设某事的所有可能结果有 n 种,每种结果都是等概率,事件 A ...

  10. 微信小程序之简单记账本开发记录（一）

    下载并安装微信开发者工具 在选择开发记账本程序的时候犹豫着选择android studio还是微信小程序 最后选择了微信小程序,因其便利和快捷. 话不多说,第一步,下载并安装微信开发者工具.下面是教程 ...