<!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. 反编译.net下的exe程序

    1. 什么叫.net平台 .NET框架是一个多语言组件开发和执行环境,它提供了一个跨语言的统一编程环境..NET框架的目的是便于开发人员更容易地建立Web应用程序和Web服务,使得Internet上的 ...

  2. windows下apache运行环境搭建

    apache的安装 要求: 1,不要安装到有中文的目录中: 2,尽量将apache,php,mysql安装到一个总的目录,便于管理.(如都建立在amp目录下,然后在该目录下分别建立apache,php ...

  3. idea（or maven） 未结束字符串字面值 非法的表达式开始

    [ERROR] *.java:[38,27] 未结束的字符串字面值 [ERROR] *.java:[38,53] 需要 ';' [ERROR] *.java:[41,19] 需要 ')' [ERROR ...

  4. 数据库中慎用float数据类型（转载）

    数据库中慎用float数据类型   大多数编程语言都支持float或者double的数据类型.而数据库中也有相同关键字的数据类型,因此很多开发人员也自然而然地在需要浮点数的地方使用float作为字段类 ...

  5. 改变生活的移动计算——感受 MobiSys 2015

    MobiSys 2015" title="改变生活的移动计算--感受 MobiSys 2015"> 作者:微软亚洲研究院研究员 张健松 今年的MobiSys会议地点 ...

  6. 安全测试——利用Burpsuite密码爆破（Intruder入侵）

    本文章仅供学习参考,技术大蛙请绕过. 最近一直在想逛了这么多博客.论坛了,总能收获一堆干货,也从没有给博主个好评什么的,想想着实有些不妥.所以最近就一直想,有时间的时候自己也撒两把小米,就当作是和大家 ...

  7. doctrine queryBuilder

    为了能够方便的切换数据库,我们有必要使用doctrine的queryBuilder, 但是估计很多人都是不喜欢的(我也是),之前尝试用的时候,发现在doctrine定义的SELECT语法中并没有CON ...

  8. java design pattern - adapter pattern

    场景 适配器模式 总结 参考资料 场景 在编程中我们经常会遇到驴头不对马嘴的情况,比如以前是继承A的接口的对象,现在外部调用的时候需要该对象已B接口的形式来调用 ,这个时候我们可以让对象同时集成A和B ...

  9. JAVA补0--->String.format()的使用

    详细地址:http://blog.csdn.net/lonely_fireworks/article/details/7962171/ 标    志 说    明 示    例 结    果 + 为正 ...

  10. PS4游戏将登陆PC：一曲属于主机的悲歌

    ​​ ​ 曾经,红白机.PS游戏机等成为一代人难以磨灭的记忆.而随后的索尼PS3.微软Xbox 360.任天堂Wii U等,也称霸了次时代主机时代,成为家庭娱乐的中心.但面对着依托于PC和智能移动终端 ...