CSS-- establecer que aparezca la barra de desplazamiento en el cuerpo corporal

Mira el código:

<HTML! DOCTYPE> 
<html> 
	<head> 
		<meta charset = "UTF-8" /> 
		<title> </ title> 
		<style> 
			* { 
				margin: 0; 
				padding: 0; 
			} 
			Html { 
				margen: 30px; 
				altura: 80%; 
				frontera: sólido 1px; 
				overflow: hidden; 
			} 
			Body { 
				margen: 30px; 
				altura: 80%; 
				frontera: deeppink sólido 1px; 
				overflow: auto; 
			} 
		</ Style> 
		
	</ head> 
	<body> 
		
		<div id = estilo "test" = "altura: 3000px;"> 
			
		</ div> 
	</ body> 
<

Cuando el cuerpo propiedad overflow, html elemento producen al mismo tiempo, aparecerá una barra de desplazamiento en el cuerpo (valor desbordamiento cuerpo se ajusta a AUTO, el desbordamiento arbitraria elemento HTML)

Si, el cuerpo, el elemento html tiene desbordamiento de un solo atributo, barras de desplazamiento aparecen en el nivel del HTML, es decir, el área de visualización

Mira un ejemplo, para ajustar la barra de desplazamiento div

<!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-- establecer que aparezca la barra de desplazamiento en el cuerpo corporal

Supongo que te gusta