浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 div（最外层包含容容器代替默认的视窗），是滚动天出现在最外层容器上，从而解决决定定位的元素滚动的问题。CSS 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        *{
            margin: 0;
            padding: 0px;
        }
        html,body{
            height:100%;
            overflow: hidden;
        }

        #wrapper{
            height:100%;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div style="height: 200px; width:200px;background-color: pink;position:absolute; left: 20px;top:20px;"></div>
    <div style="height: 2000px;"></div>
</div>
</body>
</html>

　　

css 禁用浏览器滚动条，初始最外层包含容器 wrapper的更多相关文章

  1. CSS 禁止浏览器滚动条的方法(转)

    1.完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条: <boby scroll="no"> 这个我用的时候完全没效果 ...

  2. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  3. （转）CSS 禁止浏览器滚动条的方法

    1.完全隐藏 在里加入scroll="no",可隐藏滚动条:    这个我用的时候完全没效果,不知道是什么原因!不过好多人说这么用可以,大概是用的位置不一样吧   2.在不需要时隐 ...

  4. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  6. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  7. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  8. CSS对浏览器的兼容性(IE和Firefox)技巧整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

随机推荐

  1. 题目分享M

    题意: 其实就是找到AB+min(AC,BC)的最大值 分析:刚看到这道题,很容易往AB为树的直径方向上去想,C就可以遍历每个点,最后求出对于每个点为C时的最大值 那AB到底是不是树的直径或者为什么A ...

  2. nginx反向代理做负载均衡以及使用redis实现session共享配置详解

    1.为什么要用nginx做负载均衡? 首先我们要知道用单机tomcat做的网站,比较理想的状态下能够承受的并发访问在150到200, 按照并发访问量占总用户数的5%到10%技术,单点tomcat的用户 ...

  3. 【基础】excel如何根据数据内容显示不同颜色。

    需求: 店柜完成率排名相比上阶段升降,升显示绿色“↑“,降显示红色“↓”,持平显示黑色“-”. 步骤: 第一步 先计算两次排名的差值(本次排名-上次排名). 第二步 对差值列设置单元格格式,设置格式如 ...

  4. hadoop文件系统常用操作

    详细可参考hadoop官方文档filesystem shell一节 使用hadoop离不开文件系统,比如hdfs,我们可能需要从hdfs中读取文件作为输入,并将输出保存到hdfs上某个文件中 首先创建 ...

  5. 变分深度嵌入(Variational Deep Embedding, VaDE)

    变分深度嵌入(Variational Deep Embedding, VaDE) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 这篇博文主要是对论文“ ...

  6. 一个数组求其最长递增子序列(LIS)

    一个数组求其最长递增子序列(LIS) 例如数组{3, 1, 4, 2, 3, 9, 4, 6}的LIS是{1, 2, 3, 4, 6},长度为5,假设数组长度为N,求数组的LIS的长度, 需要一个额外 ...

  7. Python-MD5加密算法接口测试

    前言 在之前的Python系列的随笔中,我跟小伙伴们讲述了Python-AES加密算法接口测试和Python-SHA256加密算法接口测试,今天我们来学习一下登录密码是md5加密的情况下,该如何使用p ...

  8. PAT 1007 Maximum Subsequence Sum (25分)

    题目 Given a sequence of K integers { N​1​​ , N​2​​ , ..., N​K​​ }. A continuous subsequence is define ...

  9. influxes 基本概念

    Influxes 基本概念 1.安装 两种,虚机的话直接下载二进制文件起就好了,容器也很方便,存储挂载到/var/lib/influxdb 起就ok,配置文件可以通过configmap挂载进去. 2. ...

  10. maven and dubbo

    maven是什么 maven是一个项目管理和构建自动化工具. 核心概念 pom (project object model) mvn compile 编译 mvn package 编译成一个jar的包 ...