css 禁用浏览器滚动条,初始最外层包含容器 wrapper

浏览器默认的视窗会随着滚动条滚动,绝对定位的元素会随着滚动条滚动,为了解决这个问题我们需要禁止浏览器的滚动条,然后在代码的最外层初始化一个 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>

  

猜你喜欢

转载自www.cnblogs.com/spqin/p/12939794.html
今日推荐