消除系统滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
margin: 50px;
width: 700px;
height: 300px;
border: 3px solid purple;
overflow: scroll;
}
body{
margin: 50px;
width: 700px;
height: 300px;
border: 5px solid deeppink;
overflow: scroll;
}
/*让系统滚动条消失*/
html,body{
overflow: hidden;
/*设置高度,如果不设置默认高度为0,父元素的高度有子元素撑起*/
/*父元素的高度=子元素的高度,那么就永远不会出现子元素溢出的情况*/
height: 100%;
}
#wrap{
width: 300px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<!--
考虑 document html body;
1.html body中只有一个有overflow属性时,这个属性会传给document
2.html body都存在overflow属性时.body的overflow属性才能生效,
3.当html body都存在overflow属性时.body的overflow属性一直都会作用于body身上,
html的overflow属性一直都会作用于document身上,
-->
<div id="wrap">
</div>
</body>
</html>