解决CSS布局中div高度无法达到100%的问题及其解决方案

场景描述

        在前端开发过程中，有时我们会遇到这样一个问题：设计了一个全屏高度的div元素，其CSS样式设置了height: 100%，但在实际加载页面后，该div只占据了内容高度，没有按照预期占据浏览器窗口的100%高度。

问题分析

        之所以会发生这样的情况，原因在于CSS高度百分比(height: 100%)的计算依赖于父元素的高度。如果div的直接父元素没有明确的高度设定，或者高度依赖于其内容的高度（而非视口高度或其他固定高度），那么子元素设置的height: 100%就无法准确地应用。

        具体来说，在DOM树结构中，当浏览器渲染页面时，如果body或html标签本身没有显式设置高度，div的高度百分比参照物就缺失了，导致其仅根据内容撑开高度。

解决方案

一种有效的解决方案是采用绝对定位（position: absolute）也可结合CSS的top、bottom属性来实现全屏高度的效果。以下是修正后的CSS代码示例：

神奇般的回到了100%