自动填满屏幕剩余空间

课后整理 2020-12-20

设置一个超大轮廓范围的outline 属性。例如,这里是9999px,作用是保证无论屏幕多高,轮廓色块也一定能够覆盖。

但是和border 属性不一样,outline 是无法指定方位的,只能被动地四周扩展。因此,outline:9999px solid #a0b3d6 不仅会填满底部方位的屏幕空间,还会把上面的内容空间也填满。因此,我们还需要做进一步处理,例如,提高主体内容的层叠顺序,但这显然成本太高,效果也不一定好;还有就是采用这里的clip 剪裁策略,让底部内容元素绝对定位,同时以上边缘和左边缘为界进行裁剪,这样,就完全不用担心outline 会覆盖上面的内容。

【示例】