浏览器默认的视窗会随着滚动条滚动，绝对定位的元素会随着滚动条滚动，为了解决这个问题我们需要禁止浏览器的滚动条，然后在代码的最外层初始化一个 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. Java通过反射技术动态创建对象(有参、无参构造)

    实现类: package com.ljy; import java.lang.reflect.Constructor; import java.lang.reflect.InvocationTarge ...

  2. Python高级编程-Python一切皆对象

    Python高级编程-Python一切皆对象 Python3高级核心技术97讲 笔记 1. Python一切皆对象 1.1 函数和类也是对象,属于Python的一等公民 ""&qu ...

  3. 面试被问了三次的http状态码到底有什么

    面试被问了三次的http状态码到底有什么 想想很多人面试都会有被问到http的状态码的经历,我也是经历了三面,每次都有提及这个问题.今天就来细致的讨论一下HTTP的状态码,如有不足,欢迎留言交流: H ...

  4. 写了shell脚本想一键启动三台虚拟机的Zookeeper，却不知道为啥总是启动不了

    首先,一键启动的shell脚本是这样的 #! /bin/bash case $1 in "start"){ for i in node01 node02 node03 do ssh ...

  5. SpringBoot基础实战系列（三）springboot单文件与多文件上传

    springboot单文件上传 对于springboot文件上传需要了解一个类MultipartFile ,该类用于文件上传.我此次使用thymeleaf模板引擎,该模板引擎文件后缀 .html. 1 ...

  6. jstree 反选，测试400条数据左右有点卡

    $("#reversecheckallmachines").on("change", function () { var checkedNodes = []; ...

  7. python --设置Python3 设置为机器默认

    echo alias python=python3 >> ~/.bashrc source ~/.bashrc 反之,如果仍然需要Python2.7 ,则改成2.7就行. update : ...

  8. Redis系列（七）Redis面试题

    Redis 系列: Redis系列(一)Redis入门 Redis系列(二)Redis的8种数据类型 Redis系列(三)Redis的事务和Spring Boot整合 Redis系列(四)Redis配 ...

  9. python之logging基础入门

    博客学习至:https://www.cnblogs.com/Nicholas0707/p/9021672.html#_label0 https://www.cnblogs.com/dream66/p/ ...

  10. 3.10 Go Map哈希表

    3.10 Go Map哈希表 map是key-value类型数据结构,读作(哈希表.字典),是一堆未排序的键值对集合. map是引用类型,使用make函数或者初始化表达式创建. map的key必须是支 ...