코드를 살펴 :
<DOCTYPE html로!>
<HTML>
<HEAD>
<메타 문자 집합 = "UTF-8"/>
<제목> </ 제목>
<스타일>
* {
여백 : 0;
패딩 : 0;
}
HTML {
마진 : 30 픽셀;
신장 : 80 %;
국경 : 1 픽셀의 고체;
오버 플로우 : 숨겨진;
}
몸 {
마진 : 30 픽셀;
신장 : 80 %;
국경 : 1 픽셀의 고체 deeppink;
오버 플로우 : 자동;
}
</ 스타일>
</ head>
<body>
<div ID = "테스트"스타일 = "신장 3000px;">
</ div>
</ body>
<
오버플 속성 본체 HTML 요소들이 동시에 발생하면, 인체에 스크롤바 나타난다 (본체 플로우 값이 자동으로 설정되는 오버 플로우 임의의 HTML 요소)
, 몸, HTML 요소는 하나의 속성을 오버 플로우가있는 경우, 스크롤바는 HTML 수준, 즉 뷰포트에 표시
, 예를 들어 봐 스크롤 막대 사업부를 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
margin: 30px;
height: 80%;
border: 1px solid;
overflow: hidden;
}
body{
margin: 30px;
height: 80%;
border: 1px solid deeppink;
overflow: auto;
}
</style>
</head>
<body>
<div id="test" style="height: 3000px;">
</div>
</body>
</html>
如果要禁止 "视口" 的滚动条, html,body任意一个设置overflow属性值为hidden即可。
使用绝对定位模拟固定定位
先看一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height: 100%;
}
#wrap{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body style="height: 3000px;">
<div id="wrap">
</div>
</body>
</html>
当body身上的的滚动条滚动时,初始包含块的位置发生改变,导致wrap块移动。
初始包含块: 是一个视窗大小的矩形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: hidden;
}
#wrap{
height: 100%;
border: 1px solid deeppink;
overflow: auto;
}
#testFixed{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="wrap">
<div id="testFixed">
</div>
<div id="test" style="height: 3000px;">
</div>
</div>
</body>
</html>
初始包含块: 是一个视窗大小的矩形。
testFixed设置了position:absolute,相对初始包含块定位。无论div身上的滚动条怎么滑动,都不影响初始包含块,从而实现使用绝对定位模拟固定定位。