<!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. C语言占位符（待完善）

    %c 读入一个字符 %s 读入一个字符串,遇到空格制表符或者换行符时结束. %d 读入一个十进制整数 %x或者%X   读入一个十六进制整数(读出时,%x:小写,%X:大写) %o   读入一个八进制 ...

  2. 第一次作业：使用java实现word count

    github项目地址: https://github.com/changrui520/homework 作业要求: 可执行程序命名为:wc.exe. 该程序处理用户需求的模式为:wc.exe [par ...

  3. OpenCV Laplace 算子

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  4. SAGE|DNA微阵列|RNA-seq|lncRNA|scripture|tophat|cufflinks|NONCODE|MA|LOWESS|qualitile归一化|permutation test|SAM|FDR|The Bonferroni|Tukey's|BH|FWER|Holm's step-down|q-value|

    生物信息学-基因表达分析 为了丰富中心法则,研究人员使用不断更新的技术研究lncRNA的方方面面,其中技术主要是生物学上的微阵列芯片技术和表达数据分析方法,方方面面是指lncRNA的位置特征. Bac ...

  5. 20180105关于课题所用的labview的改进随笔

    在原有的工程上1.写入60个不同的数字~顶层,看测量次数是1.2.3.4.5.6.7.8.9的时候文件记到几次的数,一次的话,从接受命令到全部写到文件最短需要等多久.写入固定的数,通过startfla ...

  6. getcwd() 和 os.path.realpath () 的区别

    http://lemfix.com/topics/7 getcwd()获取当前目录:其他文件调用时,会根据当前文件的位置获取目录,不同的文件调用,值是不一样的. os.path.realpath()获 ...

  7. Linux上的软件ClamAV

    ClamAV是使用广泛且基于GPL License的开源代码的典型杀毒软件,它支持各种平台,如:windows.linux.Unix等操作系统,并被广泛应用于其他应用程序,如:邮件客户端服务器.HTT ...

  8. 如何为MyEclipse添加XML文档所使用的DTD

    1.打开MyEclipse,找到菜单栏"Window"---->"Preferences(首选项)": 2.在左侧导航菜单栏找到"MyEclip ...

  9. javaweb 中 error-page

    我们的请求找不到时,会跳到错误页面,tomcat提供了一个错误页面,但是不太好.分析:tomcat自带错误页面不好的原因:有一下两点: 1.不好看: 2.不能为seo做出贡献.思考:如何解决以上问题? ...

  10. derby常用语法

    derby常用语法 以user表为例: 1.创建表 create table user (id int primary key,account varchar(5),name varchar(5),p ...