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