非固定定位
除了将上栏固定在屏幕上，我们还有另一种选择，那就是上栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的要是多了，超出了屏幕的高度该怎么办呢？这就要用到叫做 overflow-y。
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 用link引入渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 令html和body全屏 */
html, body { height: }
/* 上面的那栏 */
.top {
/* 设置合适的高度 */
height: ;
/* 蓝色背景 */
background: var(--靛蓝);
}
/* 主区 */
.main {
/* 给个合适的高度 */
height: ;
/* 给个好看的渐变色 */
background: var(--天蓝);
/* 竖直方向的溢出设置为 */
overflow-y: auto;
}
/* 盒子的认样式 */
div {
font-size: px;
color: white;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子
</div>
</body>
</html>
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 用link引入渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 令html和body全屏 */
html, body { height: }
/* 上面的那栏 */
.top {
/* 设置合适的高度 */
height: ;
/* 蓝色背景 */
background: var(--靛蓝);
}
/* 主区 */
.main {
/* 给个合适的高度 */
height: ;
/* 竖直方向的溢出设置为 */
overflow-y: auto;
}
.child {
height: px;
/* 给个好看的渐变色 */
background: var(--天蓝);
}
/* 盒子的认样式 */
div {
font-size: px;
color: white;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="child"></div>
</div>
</body>
</html>
运行结果：
这里一定要记住这几个要点：
602392714
清零编程群