<!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. Python常用的数据结构详解

    数据结构:通俗点说,就是储存大量数据的容器.这里主要介绍Python的4种基本数据结构:列表.字典.元组.集合. 格式如下: 列表:list = [val1,val2,val3,val4],用中括号: ...

  2. 61）PHP，立即跳转

    一般使用   header(‘Location:’)来进行跳转. ******************************************************************* ...

  3. 如何修改tomcat名称

    修改tomcat名称为  Tomcat-jx-1

  4. 用C#实现一个百度万年历

    目录 背景 实现步骤 关键点 结束语 背景 命理学是对人生命运规律的探索,以人的各式各样的数字(出生年月日.姓名笔划等)来推测人的性格与命运并占卜推测未来会发生的事情.古今中外都有相关方面的理论,中国 ...

  5. Python||NameError: name 'reload' is not defined

    多半是运行如下代码时报错: import sysreload(sys)sys.setdefaultencoding("utf-8")123这段代码是为了解决Python中中文输出出 ...

  6. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码

    Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

  7. vue-cli3初始化项目

    1 npm install -g @vue/cli 创建配置 创建 1 vue create vue-app 选择配置 1234 ? Please pick a preset: (Use arrow ...

  8. LeetCode Day 3

    LeetCode0003 给定一个字符串,请你找出其中不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 & ...

  9. Qt QString与string的转换

    QString --> string QString.toStdString();   string --> QString QString::fromStdString(string);

  10. Html 的生命周期

    零.序言 vue 用多了,自然离不开生命周期.最近突发奇想,加上之前看过的文章中关于 script 标签中的 async 和 defer 的捣糨糊,决定整理一下,攻克这个模糊点. 当然,最多的还是与 ...