몸 몸에 스크롤 막대가 나타납니다을 설정 CSS--

코드를 살펴 :

<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身上的滚动条怎么滑动，都不影响初始包含块，从而实现使用绝对定位模拟固定定位。

몸 몸에 스크롤 막대가 나타납니다을 설정 CSS--

추천