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

拼搏现实的明天。 2022-10-06 00:36 275阅读 0赞

### 目录 ###

*  1. 问题
 *  2. 解决方案
 *  3. 效果展示
 *  4. 代码
 *  5. 参考文献

# 1. 问题 #

最近在做一个前端界面，在未解决问题之前的效果图如下所示：  
![在这里插入图片描述][20210610095833491.png]

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

在标签里面设置一个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. 效果展示 #

![在这里插入图片描述][20210610100805828.png]

# 4. 代码 #

上面的代码在我的github：[完整代码][Link 1]

# 5. 参考文献 #

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

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

[20210610095833491.png]: /images/20221005/b4c398fc54654b9bb138827787277aeb.png
[20210610100805828.png]: /images/20221005/476480b79d534a8cb5d0e61b1a927f5c.png
[Link 1]: https://github.com/yeahCatlikefish/ReactProject
[1. _div_height_100]: https://blog.csdn.net/weixin_44370837/article/details/103967596
[2. _HTML_CSS]: https://www.jianshu.com/p/b7fd3cf53924

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关解决html中图片自适应屏幕大小的问题

解决html中图片自适应屏幕大小的问题一、问题重现二、解决方案三、修改之后，重新看一下页面，底部没有再出现空白，图片正常适应屏幕大小一、问题

清疚/ 2024年04月06日 13:52/ 0 赞/ 91 阅读

相关设置高度自适应不同设备屏幕的高度

qq音乐的歌曲播放页面，页面的宽度和设备宽度是一致，这时候我们就用的flex布局，但是首先要设置html和body宽度都为100%，因为百分比布局是相对父级元素来说的，有以下h

系统管理员/ 2023年07月05日 10:25/ 0 赞/ 47 阅读

相关 rem 自适应屏幕解决方案

1.使用的长度单位rem、vw rem 这个单位代表根元素的 font-size大小（一般来说是html元素的font-size）。当用在根元素的font-size上面时

深碍√TFBOYSˉ_/ 2023年07月01日 08:34/ 0 赞/ 31 阅读

相关 vue中设置height:100%无效的问题及解决方法

在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效，在App.vue中：

约定不等于承诺〃/ 2022年10月21日 14:59/ 0 赞/ 41 阅读

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

目录 1. 问题 2. 解决方案 3. 效果展示 4. 代码 5. 参考文献 1. 问题最近在做一个前端界面，在未解决问题之前的效

拼搏现实的明天。/ 2022年10月06日 00:36/ 0 赞/ 276 阅读

相关自适应屏幕设置

参考[@media自适应屏幕][media] 1024\500 （8.9寸） 1024\768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1

我就是我/ 2022年05月23日 10:49/ 0 赞/ 318 阅读

相关 NGUI屏幕自适应

屏幕自适应 NGUI可以比较方便的实现屏幕自适应，但是它的官方教程里面针对这个问题没有详细的教程，所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较

冷不防/ 2022年04月11日 10:45/ 0 赞/ 324 阅读

相关 VMware屏幕自适应

下载VMware Tool ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

左手的ㄟ右手/ 2022年02月21日 15:58/ 0 赞/ 318 阅读

相关 react Echart 自适应问题

import as React from 'react' // import Echarts from 'echarts' import ReactE

素颜马尾好姑娘i/ 2021年11月02日 02:08/ 0 赞/ 618 阅读

相关 unity屏幕自适应

下面以竖屏游戏为例，步骤如下： 1.新建工程 2.选择发布平台。File--BuildSettings...--PlatForm里面选择平台--Switch Platf

喜欢ヅ旅行/ 2021年09月16日 05:42/ 0 赞/ 554 阅读