上移问题的根本是视窗高度的改变
此次主要遇到的问题是:父元素的高度不被子元素撑开的问题
主要的情景
在子元素定高,父元素设置100%(跟随祖先元素,这里是跟随视窗大小)-->导致子元素溢出
y轴滚动后才可显示溢出部分,如下图
解决方案:
- 溢出问题:让元素根据内容撑开,而不是给外部的父元素一个
height:100%(从而避免因为两个元素高度不一致的溢出问题) - 铺满height的问题:给外部的父元素一个
min-height:100%(从而解决子元素的高度小于视窗的问题)
此次纠结的问题:由于需要铺满的背景元素与内容元素是兄弟的关系,所以需要一个父元素将其关联起来。使用absolute使背景元素相对于共同的父元素(即给该父元素设置成定位元素,这里用relative),这样父元素的高度由内容元素撑开后,背景元素由于相对于该父元素,其height的100%就变成了该父元素的高度,也就是被内容元素所撑开。
知识欠缺:绝对元素相对于某定位元素之后,其height的100%就变成了该定位元素的高度