看效果，没有滚动条，超出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. CF70E Information Reform

    题意:给你一棵树,要选择若干节点,若一个点i没有选择,则有\(d(dis(i,j))\)的代价,其中j被选择.选择一个点代价为k,求最小代价. 首先,考虑这样一个问题: 如果距离a的最近被选点为i,距 ...

  2. .net大文件上传

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  3. Android 之Activity启动模式(二)之 Intent的Flag属性

    首页博客链接关于我留言板 前面介绍了通过launchMode设置Activity的启动模式.本章接着介绍Activity的启动模式相关内容,讲解的内容是Intent与启动模式相关的Flag,以及and ...

  4. Python语法 - 推导式

    推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 列表推导式(list comprehension)最擅长的方式就是对整个列表分别做相同的操作,并且返回得到一个新的列 ...

  5. mysql 使用service mysqld start 提示未识别服务 进入/etc/rc.d/init.d 下面未发现有mysqld解决方法

    1.执行whereis mysql会有如下打印: mysql: /usr/bin/mysql /usr/lib64/mysql /usr/include/mysql /usr/share/mysql ...

  6. httpd Apache服务

    TCP/IP协议 跨Internet的主机间通讯 在建立通信连接的每一端,进程间的传输要有两个标志: IP地址和端口号,合称为套接字地址 socket address 客户机套接字地址定义了一个唯一的 ...

  7. Java 线程概述

    1 进程与线程基本概念 1.1 进程:执行中的程序 每个进程都有独立的代码和数据空间(进程上下文),进程空间切换会有较大的开销,一个进程包含1-n个线程.进程是资源分配的最小单位. 1.2 线程:进程 ...

  8. 解决python在命令行中运行时导入包失败，出现错误信息 "ModuleNotFoundError: No module named ***"

    转自https://www.cnblogs.com/dreamyu/p/7889959.html https://www.cnblogs.com/lifeofershisui/p/8135702.ht ...

  9. Flutter移动电商实战 --（38）路由_Fluro中Handler编写方法

    在main.dart中初始化Fluro 编写handler 在lib下新建routers文件夹,表示里面要很多路由相关的文件 我们声明一个Handler,在里面handlerFunc固定的两个参数 重 ...

  10. android java.lang.IllegalArgumentException: Comparison method violates its general contract! 问题

    android  java.lang.IllegalArgumentException: Comparison method violates its general contract! 问题 jav ...