解决：使用React设置height:100%没有实现自适应屏幕的问题

1. 问题

最近在做一个前端界面，在未解决问题之前的效果图如下所示：

可以清楚的发现，我们的底部的文字并未与屏幕的底部距离一致，而是在屏幕的上面一点。之前的一个解决办法是：

在标签里面设置一个style={{height:700}}

这个看起来可以解决我的问题，但是当换一个屏幕更大的显示器上，我发现了这样的高度并没有适应我们的大屏幕，所以这种方法不可行。

2. 解决方案

上面提到的那种方法不可行，于是网上找到了一种说法是：

.head_Top{
    width: 100%;
    height: 100%;
}

就是将width 和 height都设置为100%，我自己试了下并没有效果，于是不停的网上搜集答案，最终找到了：就是在我们的定义的样式里面添加一个绝对定位：使用绝对定位，此时就会满屏显示背景图

.head_Top{
    width: 100%;
    height: 100%;
    position: absolute;
}

解释： 绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。

3. 效果展示

4. 代码

上面的代码在我的github：完整代码

5. 参考文献

1. 想要div铺满全屏，设置height:100%却没有生效

2. 用HTML和CSS实现酷炫的文字特效