1. 前言
除了将上栏固定在屏幕上，我们还有另一种选择，那就是上栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的 内容 要是多了，超出了屏幕的高度该怎么办呢？这就要用到 一个 属性 叫做 overflow-y 。
2. 实现
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta 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></div>
<div>
这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子这里是主盒子
</div>
</body>
</html>运行结果：
可以看到这个案例虽然 文字 撑开了 内容 导致溢出，然后出现滚动条可以上下滚动，但背景色却没有变化，这是因为我们是在主盒子上面加的背景色。
这种靠子元素来撑开 内容 的溢出应该把样式全部写在子元素上面去，父元素只提供 一个 高度和 一个 overflow-y 即可：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta 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></div>
<div>
<div></div>
</div>
</body>
</html>运行结果：
3. 小结
这里一定要记住这几个要点：
上栏和下栏的宽度加起来要刚好是屏幕的高度； 下栏一定要写 overflow-y: auto ； 下栏的背景什么的最好写在子元素上，除非你就是想要这种背景不动的 效果 。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100588