<!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. Oracle中实现sql查询得到连续号码段

    一.表名为t的表中数据如下: select * from t; FPHM KSHM ---------- ---------- 实现代码如下: select b.fphm,min(b.kshm),ma ...

  2. 规范化开发和time相关模块

    1. 规范化开发 如果在开发的过程中将所有的程序放在一个py文件中,加载时会很慢,同时降低了代码的可读性,查询起来也麻烦 所以要将一个oy文件合理的分成多个py文件,在blog大目录下分为以下几个部分 ...

  3. django框架基础-视图系统-长期维护

    ##################   什么是视图?     ####################### 视图: 1,一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受W ...

  4. Eclipse中项目过大引起的 IDE 加载缓慢，JVM 内存不足的情况解决

    如果 IDE 加载项目非常缓慢,甚至常常出现卡死的情况,有可能是开发工具设置的 JVM 内存不够引起的.解决办法:找到 Eclipse 的安装目录,修改 Eclipse.ini 配置文件.修改此配置文 ...

  5. .net批量插入数据库,SqlBulkCopy方法

    /// <summary> /// 把数据插入LessonQuestion表 /// </summary> /// <param name="lessontit ...

  6. AUTODESK 卸载工具，完美彻底卸载清除干净autodesk各种软件残留注册表和文件

    小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...

  7. 接口测试-chap3-https请求证书问题

    接口地址如果是HTTPS,需要安装证书,或者在发送请求时传入参数verify=False,表示忽略 res = requests.get(url, verify=False)

  8. <JZOJ5938>分离计划

    emm骚操作 #include<cstdio> #include<iostream> #include<cstring> #include<algorithm ...

  9. VMware虚拟机克隆CentOS6.5后修改网卡

         在学习zk伪分布式集群对的时候,第一次注意到克隆虚拟机后修改eth的ip地址,发现ip不是自己修改的ip,进而在询问下发现,当我们第一次登陆查看我们克隆的虚拟机ip时:我们看到的ip不是et ...

  10. Java实体映射工具MapStruct的使用

    官网地址:http://mapstruct.org/ MapStruct 是一个代码生成器,简化了不同的 Java Bean 之间映射的处理,所谓的映射指的就是从一个实体变化成一个实体.例如我们在实际 ...