react内嵌div高度屏幕自适应

最新推荐文章于 2026-03-27 14:51:44 发布

原创最新推荐文章于 2026-03-27 14:51:44 发布 · 1.1w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #height #浏览器 #自适应 #position

收录于

项目随笔专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在React项目中使div元素高度自适应浏览器窗口高度的方法。通过使用绝对定位，可以避免影响其他页面布局，同时保持div的高度始终与浏览器窗口高度一致。

怎样让一个div高度自适应浏览器高度在应用中很常见，这是一个前端开发人员老生常谈的问题。在我们一般的开发中只要设置了下代码，就可以让div自动适应屏幕的高度。

html,body,div{
     height:100%
}

但是最近我在写一个项目的时候，用的是react库，这导致我用上面的方法的时候，其他页面也受影响了。于是用了绝对定位完美了解决了这个问题。代码如下：

<html>
<body>
<div style="position:absolute;width:100%;top:0;bottom:0;backgroung:#000"></div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾小莫的梦

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React 设置iframe自适应全屏

sirwsl

04-07

4171

React 设置Iframe宽高自适应全屏，iframe内嵌网页随屏幕进行缩放

4 条评论您还未登录，请先登录后发表或查看评论

react 表格高度自适应

weixin_45239190的博客

03-15

1080

使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。一般用来设置流式布局宽高，当然，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。vh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;: 相对于视窗的宽度或高度中较大的那个。

React里单页面div自适应浏览器高度占满屏幕

clf_programing

05-15

1万+

思路：可以用绝对定位方式，让div占满屏幕，css样式如下： height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;例子：render() { return ( <body> <div className="container"> &...

react数据大屏四种适配方案

最新发布

qq_40121308的博客

03-27

282

在数据大屏、可视化面板、全屏展示类项目中，固定比例、等比缩放、无拉伸变形是核心需求。传统的 rem、vw/vh 适配方案在大屏场景下容易出现布局错乱、文字模糊、比例失调等问题。这里实现一个开箱即用、支持 4 种缩放模式的 React Hook：useScreenScale，一行代码实现大屏完美自适应，支持等比缩放、宽铺满、高铺满、强制拉伸四种模式，兼容窗口 resize，真正做到一次集成、全端适配。

【React】实现div高度适配浏览器窗口大小

zqq_2016的博客

09-29

1991

实现的方法有好几种，本人仅提供自己在实现过程中使用的这一种。 <div style={{height:"100%",position:"absolute",width:"100%",left:0,top:0}}> {/* 中间内容省略 */} </div> 实现效果：

实现居中的三种方式（react行内样式写的）

weixin_52223081的博客

06-08

5368

实现居中的三种方式（react行内样式写的）

【react踩坑】设置div宽度自适应

qq_33539213的博客

09-11

4770

场景：使用antd组件tabs左右滑动时，有些边上的标签会只显示一半，影响页面效果。现在需要每页只显示5个tab标签，每个tab标签宽度自适应。实现思路：监听包裹tabs的div组件的宽度变化，动态设置每个tabs的宽度为当前外部div宽度的1/5。方法一： const element = document.getElementsByClassName("ant-tabs-nav-scr...

React入门

qq_24006407的博客

03-04

249

React简介 React是一个用于构建用户界面的JAVASCRIPT库，主要用于构建UI，所以被认为是MVC模型当中的V。其起源于Facebook的内部项目，用来假设Instagram的网站，并于2013年5月开源。 React特点声明式设计：React采用声明范式，可以轻松描述应用；高效：React通过对DOM的模拟，最大限度地减少与DOM的交互；灵活：React；全新的 KaTe...

如何快速构建交互式仪表板：gridstack.js与React集成完整指南

gitblog_00743的博客

02-27

740

在现代Web开发中，交互式仪表板是数据可视化和用户界面的重要组成部分。gridstack.js作为一款功能强大的JavaScript库，能够帮助开发者轻松创建可拖拽、可调整大小的网格布局，特别适合构建灵活的仪表板界面。本指南将详细介绍如何将gridstack.js与React框架无缝集成，让你在几分钟内搭建出专业级的交互式仪表板。 ## 📌 核心功能概览：为什么选择gridstack.js？

React项目中遇到的兼容问题(M端适配APP)

gengtieguang的博客

02-19

846

M站项目问题描述： 1.视频打不开时右上角返回无效，导致无法返回（M站） ios机出现的问题，发现ios14.3、14.4版本正常，ios12版本点击不灵敏后发现原因是有个div 样式visibility：hidden[设置元素不可见]并充满整个屏幕，ios12版本不兼容解决方法：换成display:block 2.chat按钮没有固定（M站） ios机出现的问题，发现ios14.3、14.4版本正常，ios12版本不固定底部聊天室按钮须放在最外层就可以了 3. M站需要锚点动画

React根据宽度自适应高度

weixin_34353714的博客

10-10

1604

有时对于响应式布局，我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化，传统是用jQuery实现。而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可 Try on Codepen 需要注意的是在resize时候也要同步变更，需要注册个监听器 class Card extends React.Component { constru...

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

06-10

5063

目录1. 问题2. 解决方案3. 效果展示4. 代码5. 参考文献 1. 问题最近在做一个前端界面，在未解决问题之前的效果图如下所示：可以清楚的发现，我们的底部的文字并未与屏幕的底部距离一致，而是在屏幕的上面一点。之前的一个解决办法是：在标签里面设置一个style={{height:700}} 这个看起来可以解决我的问题，但是当换一个屏幕更大的显示器上，我发现了这样的高度并没有适应我们的大屏幕，所以这种方法不可行。 2. 解决方案上面提到的那种方法不可行，于是网上找到了一种说法是： .head_

高度自适应的 textarea react 解决方案

abcde158308的博客

06-27

3474

高度自适应的 textarea 背景介绍正如我们所知道的 textarea 是一个行内块元素 display: inline-block 并且它的默认宽高由 cols & rows 决定, 也就是说 textarea 的 height 并不会自适应于内容长度. textarea 的宽高是如何决定的? 参考文章: http://www.zhangxinxu.com/wordpre...

用 js 实现 div高度与浏览器高度相同

W1948730080的博客

09-16

2279

一、读取浏览器高度可以利用 window.innerHeight 获得当前浏览器的高度 var height = window.innerHeight; 二、获取 div 对象 var myDiv = document.getElementById("main"); # 没啥好说的三、用 style 方法修改高度 myDiv.style.heigh...

vxe-table表格自适应高度的实现方法