<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #header{
            position:absolute;
            background-color: #000000;
            color:white;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 50px;
        }
        #data{
            position:absolute;
            margin-top: 50px;
            margin-bottom: 50px;
            top: 0px;
            bottom: 0px;
            left:0px;
            width: 100%;
        }
        #category{
            height: 100%;
            background-color: #ffff00;
            float: left;
            width: 100px;
            padding: 5px;
            overflow:hidden;
        }
        #category_sub{
            width: 120px;
            height: 100%;
            overflow-x:hidden;
            overflow-y: auto;
            padding:0 10% 0 0;
        }
        #content{
            background-color: red;
            margin-left: 105px;
            height: 100%;
        }
        #footer{
            background-color: #000000;
            height: 50px;
            width: 100%;
            position: absolute;
            bottom:  0px;
            left: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="data">
        <div id="category">
            <div id="category_sub">
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
                <p>cate111111111111111111111111111111111</p>
                <p>cate2</p>
            </div>
        </div>
        <div id="content">work</div>
    </div>
    <div id="footer"></div>
</body>
</html>

div隐藏滚动条，仍可滚动的更多相关文章

  1. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  2. 在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容

    <style> .box ::-webkit-scrollbar {width: 0px;} </style> <div class="box"> ...

  3. 纯css，div隐藏滚动条，保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  4. css 给div添加滚动并隐藏滚动条

    在html中 <div class="box"> <div>下面内容会单独滚动</div> <div class="scroll ...

  5. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  6. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  7. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

  8. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  9. 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...

随机推荐

  1. 线程中start和run方法的区别

    先说java中实现多线程常用的两种方式:   1:继承Thread类,并重写run()方法   2:实现Runnable接口,实现run方法实际上Thread类也是实现了Runnable接口 [Jav ...

  2. C++线程池的实现

    线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...

  3. 吴裕雄--天生自然 python开发学习笔记：一劳永逸解决绘图出现中文乱码问题方法

    import numpy as np import matplotlib.pyplot as plt x = np.random.randint(0,20,10) y = np.random.rand ...

  4. SHELL用法一（基本概念）

    1. SHELL 编程概念入门 1)一个完整 Linux 操作系统(Linux 内核),默认用户是不能直接操作 Linux 内核,需要借助第三方的程序或者软件去操作,例如桌面工具.命令行工具(SHEL ...

  5. 从CVPR 2014看计算机视觉领域的最新热点

    2014看计算机视觉领域的最新热点" title="从CVPR 2014看计算机视觉领域的最新热点"> 编者按:2014年度计算机视觉方向的顶级会议CVPR上月落下 ...

  6. win10安装3DMAX失败，怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装3DMAX失败或提示已安装,也有时候想重新安装3DMAX的时候会出现本电脑windows系统已安装3DMAX,你要是不留意直接安装3DMAX,只会安装3DMAX的 ...

  7. 操作的系统的PV操作

    转自:https://blog.csdn.net/sunlovefly2012/article/details/9396201 在操作系统中,进程之间经常会存在互斥(都需要共享独占性资源时) 和同步( ...

  8. Mybatis 常见面试题

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...

  9. OpenResty+缓存穿透基本介绍

    OpenResty                1.lua表达式                 2.Nginx的安装                3.OpenResty              ...

  10. js实现数组去重怎么实现?

    方法1. 创建一个新的临时数组来保存数组中已有的元素 var a = new Array(1,2,2,2,2,5,3,2,9,5,6,3); Array.prototype.unique1 = fun ...