最大化reactjs中的div宽度
在ReactJS中，要最大化一个div的宽度，可以使用CSS样式来实现。以下是一种常见的方法：
- 使用flex布局：将父元素的display属性设置为flex，然后将子元素的flex属性设置为1。这样子元素会自动填充父元素的剩余空间，实现最大化宽度。
<div style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>内容</div>
</div>- 使用绝对定位：将父元素的position属性设置为relative，然后将子元素的position属性设置为absolute，并设置left、right属性为0。这样子元素会占据整个父元素的宽度。
<div style={{ position: 'relative' }}>
<div style={{ position: 'absolute', left: 0, right: 0 }}>内容</div>
</div>这些方法可以适用于ReactJS中的div元素，可以根据具体需求选择适合的方法。
相关·内容
如何在reactjs中最大化浏览器屏幕中的div宽度。 ? 正如你所看到的，即使我将宽度设置为100vw，在div容器的左边和右边也有一个很小的空白处。我用的是容器液体。如何最大化div容器的宽度以填充浏览器屏幕的宽度
浏览 17提问于2020-09-01得票数 1
2回答
我有一个面板，其中div的顺序如下
<div id="portlet" class="ui-widget-content">
<div id="header" class="ui-widget-header"> ....</div>
<div id="content"> ... </div>
</div>
如果内容溢出，我的内容将获得滚动条。我有一个最大化按钮来最大化面板。因此，当我最大化面板时，我添加了以下css类。
.m
浏览 0提问于2013-01-16得票数 2
回答已采纳
1回答
我正在寻找一种方法来最大化Bootstrap行中的映射。在下面的语法中，左边的col-md-9 div是地图，右边是一个固定的240px宽的图像。
<div class="row">
<div class="col-md-9">
<div id="mapid" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-3">
浏览 45提问于2019-06-27得票数 0
回答已采纳
摘要
我试图制作一个<div>容器，其宽度和高度都与“clientWidth和clientHeight在最大化窗口中的值”相同。也就是说，div容器的宽度和高度是固定的，当它们处于最大化窗口时，它们的值分别等于-- 100%的宽度和100%的高度。
需要量
为了实现这个目标，我可能需要使用javascript来获取最大化窗口中的clientWidth / clientHeight值，然后调整<div>容器的大小。我可能只使用CSS布局来实现它。那么，实现这一目标的最佳途径是什么？我该怎么做？
问题
如何直接求出clientWidth / clientHeight的最
浏览 4提问于2016-01-04得票数 0
回答已采纳
1回答
我已经制作了三个自定义按钮，用于关闭、最大化和最小化。我的关闭按钮的功能正在工作，但我不知道最大化和最小化按钮！实际上，我并不真正需要最大化按钮，因为我的关注点是Electron.js中的最小化按钮！ 我已经在互联网上搜索了很多次，但我的搜索还是不起作用！ 请帮帮我！ <div class="ctrl-box">
<div class="exit" onclick="window.top.close()">×</div>
<div class="minimize">‒</di
浏览 48提问于2021-01-05得票数 0
编辑/解决:原因是，在窗口大于1268的情况下，我没有设置宽度，这对于平滑调整大小并不重要，但如果通过最大化跳转到比1268更高的值，则会这样做。
如果手动调整窗口的大小，受影响的div (.bannerbild、.banner)也会调整大小。不幸的是，他们不会在最大化窗口的情况下这样做。
#维度div在手动调整大小和最大化时显示正确的宽度和高度。
我在Chrome、IE、FF和Opera的最新版本中测试了这一点。
编辑:我必须重新措辞:如果窗口是最大化的，然后得到“非最大化”，那么div确实会调整大小。(当我再次点击最大化按钮时，它们不会调整到最大宽度.)
var slideamount;
浏览 1提问于2014-01-24得票数 2
回答已采纳
2回答
宽度不会根据媒体查询响应
、、、
我在尝试使用媒体查询来查看效果。因此，当窗口最大化时，我尝试使用min-width(480px)查询将div的宽度从100%更改为520px，但是div的宽度保持100%。
代码：
#box {
margin: auto;
background: white;
width: 100%;
}
// Media Queries
@media only screen and (min-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: bl
浏览 9提问于2013-05-22得票数 0
1回答
国家管理- ReactJS
、、、、
我有一个三列不均匀的网格。我想添加这个特性-每一列都应该有一个图标来最大化它，这将使该列全屏，然后一个选项，以最小化它应该出现。
我当前的逻辑包括:为可见性创建一个状态，并在可见和隐藏之间切换一个按钮，然后使用条件语句显示列，如果为true，则显示列，如果不是，则不显示。
我当前的代码使其他列的内容被隐藏，而不是列本身，并且最大化不会发生。
我该怎么做？
密码-
const [show, setShow] = useState(true)
<RiFullscreenLine color='white' onClick={() => setShow((s) =>
浏览 3提问于2022-06-01得票数 0
首先，我想说，我不是一个前端工程师，我的UI和UX技能非常低。
所以我的问题是:我有一个带有p标签的div。当浏览器窗口被最大化时，我想让它变成width: 700px。但是如果我把这个属性放在div的CSS中。如果我调整窗口大小，文本不会缩小。所以我想让它在窗口最大化的时候达到某个点，如果你调整窗口的大小，就缩小它，而不影响侧边栏div。
为了让你更清楚，我给你举个例子：
最大化浏览器窗口：
最小化浏览器窗口：
HTML
<!-- HOME -->
<div id="home" class="content">
浏览 0提问于2013-01-06得票数 0
回答已采纳
2回答
我有一个关于css的问题:不像max-width和.footer那样的html div标记(.sidenav和.right_nav)。正如我们所知道的，使用最大宽度css属性，html元素最大化，直到最大宽度值，但当我们缩小维度时，html元素响应响应。在本例中，.sidenav和.right_nav是不起作用的div标记。下面是JSFiddle：上的代码
浏览 6提问于2017-03-23得票数 1
回答已采纳
下面的超文本标记语言文件在Chrome中产生一些特殊的东西，这取决于行$("#canvas").height(100);是否被注释。
<!DOCTYPE html>
<html>
<body>
<div style="margin-right: auto; margin-left: auto; width: 940px;">
<div><h1>Title</h1></div>
<div st
浏览 1提问于2013-04-08得票数 0
2回答
我增加了包装div，以使粘性页脚，这项工作成功，然而一个新的问题刚刚出现，页面内容移动到中心，而不是保持在指定的位置。这个空间是从左边和右边平均出现的，当页面最大化时你会注意到这一点。
如何从左侧和右侧移除空间，使wrap div具有全宽度？
代码：
<div id="wrap">
<nav class="navbar navbar-default navbar-static-top">
</nav>
<!--*********************body*************************
浏览 4提问于2016-02-29得票数 0
回答已采纳
我有一个使用' react -lightbox- component‘依赖项的react组件。 http://jfcaiceo.github.io/react-lightbox-component/ 我想阻止所有被命名为'decorative_pic‘的图片被最大化为lightbox 这些图像应保留为缩略图，并且不能在Lightbox中最大化 其他图像应在默认行为中最大化。 例如： /*
pic_01 -> should be maximized
pic_02 -> should be maximized
pic_03 -> sh
浏览 36提问于2019-02-19得票数 0
回答已采纳
我的页面中有一个div元素。以下是我希望它具有的功能：
点击浏览器窗口后，即最大限度地填写它
在其最大化之后，div元素将在浏览器窗口大小变化时保持最大化。
当它最大化时，点击它将div还原到原来的大小，然后再最大化。
为了实现第二点，我在窗口上注册了一个调整大小的事件，以保持最大化状态。当涉及到第三点时，调整大小事件将被移除。但是，似乎未能删除“调整大小”事件，因为当我调整浏览器窗口时，div元素再次最大化。有人能告诉我引擎盖下面发生了什么吗？
!DOCTYPE html>
<html lang="en">
<head>
浏览 4提问于2015-11-02得票数 0
回答已采纳
3回答
我有一个页面与swf闪光灯与宽度300x250
<div id="flashswf"> ...some flash </div>
<div id="maxme">full screen</div>
我有一个名为full screen的链接，我需要最大化flashswf div以适合当前浏览器的最大高度和宽度
这可以使用jquery实现吗？有什么想法请提出来
浏览 3提问于2009-12-22得票数 1
回答已采纳
3回答
我用下面的css 设计了一个表单
.leftdiv
{
float: left;
width: 46%;
}
.rowdiv
{
margin-bottom: 4px;
clear: both;
width: 80%;
}
.rightdiv
{
float: left;
width: 36%;
}
当我最大化屏幕时，div是重叠的，所以有人可以帮助我如何更改css，以便在最大化或缩小屏幕和文本框宽度时显示相同的内容，标签文本可以包装.
浏览 0提问于2014-02-19得票数 1
1回答
Div始终在顶部
、、、
我想要一个始终可见的div在我的页面的右边。我把它叫做“#侧边栏”。它就漂浮在我页面的正文上。问题是，当页面没有最大化，或者在一些小监视器中，浮动的div移动主页(#container)。有什么想法可以解决这个问题吗？thx
浏览 4提问于2011-01-27得票数 1
当我的浏览器窗口被最大化时，这段代码工作得很好，子窗口包含在父窗口中，并且父窗口跨越浏览器的宽度。但是，当浏览器窗口小于子元素宽度时，父元素无法包含它(在chrome 20和firefox 13中进行了测试)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<style type="text/cs
浏览 0提问于2012-07-11得票数 1
回答已采纳
我使用过来自的Jquery可排序UI
我想添加最大化和最小化按钮为每个widget.When‘最大化’点击小工具将占据整个页面，并隐藏其他widgets.How来做这件事。
我已经尝试隐藏所有列，并使用当前窗口小部件插入新的div。但我推着附加的小工具一旦again..So我困惑了很多…
浏览 1提问于2012-02-06得票数 1
回答已采纳
3回答
我有两个小的html/css问题。
基本上，我有一个蓝色框架(2 div: 1外层-div用于1 1px边框，1内div用于7 1px边框)，其中包含一个标题(左上角)、搜索文本框(右上)和一些按钮。
我这里有一个jsFiddle：
我们可以在全屏上看到再现问题的结果：
第一个问题:当我的浏览器最大化时，我的搜索文本框位于右上角，所有的按钮都放在一条水平线上。没关系。但是当我调整浏览器的大小(宽度)时，我的按钮放在两行上，我不知道为什么？？我希望我所有的按钮都保持在一行中。第二个问题:当我的浏览器最大化时，我的内部div和外层div正确显示。但是当我的浏览器在某一点上调整大小(宽度)时，外部d
浏览 4提问于2011-05-12得票数 2
回答已采纳
您好，我有一个简单的CSS代码来添加一个横幅到sharepoint 2010站点-问题是，当我添加它时，页面不能‘识别’由横幅添加的额外水平空间，因此滚动条滚动超过页面底部。当窗口最大化和不最大化时都会发生这种情况。发生在IE，chrome，FF中。
编辑：
标语代码：
<div id="header_container">
</div>
css：
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:n
浏览 1提问于2011-02-25得票数 1
<div id="mainMenu">
<div id="Title">
My Website
</div>
<div id="Login">
Login
</div>
</div>
在CSS中，#mainMenu有position:fixed; with left:0; right:0; width:100%; #Title is float:left; #Login is float:right;
当浏览器窗口被最大化时
浏览 0提问于2012-12-15得票数 0
回答已采纳
我有一个窗口，该窗口根据当前显示的视图以编程方式更改窗口的大小。用户不能自己调整窗口大小，但可以最大化窗口。
问题是，如果视图在最大化时改变，最大化的窗口大小也会改变，我不希望这样，我希望它只改变非最大化窗口的大小。
我的第一个想法是只检查窗口是否被最大化，如果是这样，不要调整it...but的大小问题，那么当它在不同的视图中恢复时，当它被最大化时，它将不会恢复到它应该的新大小。
对此有什么想法吗？
谢谢!
浏览 1提问于2009-08-11得票数 1
回答已采纳
当浏览器调整大小，使视区变得更小时，如何使彼此相邻浮动的DIV不换行？
div {
float: left;
}
例如，当浏览器完全最大化时，div的队列如下所示：
|div| |div| |div| |div| |div| |div| |div| |div|
但是当浏览器调整到更小的尺寸时，就会发生这种情况：
|div| |div| |div| |div| |div|
|div| |div| |div|
当浏览器被重新调整为更小的尺寸时，如何使div不换行？
浏览 2提问于2010-02-17得票数 40
回答已采纳
6回答
假设我并排有两个div:一个向左浮动，另一个向右浮动。现在假设我将左边浮动div的大小设置为200px。如何强制右浮动div“最大化”自己或占据水平屏幕空间的其余部分(无论浏览器窗口的大小如何？
浏览 0提问于2010-06-08得票数 2
回答已采纳
1回答
我有一个较大的图像，它保存在较小的div中。div应用了position:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden，因此只有一部分图像可见。该div位于另一个div中，该div使用width:1000px; margin:0 auto; position:relative;使页面在屏幕上居中
我对图像应用了$('#theImage').draggable({cursor: 'move', containment: [-523,-73
浏览 0提问于2012-05-19得票数 0
我正在C++中创建一个windows应用程序。我正在使用SDL () --然而，这个问题适用于用C++编写的许多其他类型的windows应用程序，因为我以前在MFC中遇到过同样的问题，但从未解决过这个问题。
现在，我希望我的应用程序启动最大化。许多其他应用程序默认处于最大化状态启动，例如，当我运行firefox时，它会自动启动最大化。
现在我读到我可以使用ShowWindow
通过呼叫：
ShowWindow(info1.window, SW_MAXIMIZE);
当调用时，窗口就会最大化，就像用户单击最大化按钮一样。但是，问题是，当我的应用程序启动时，它首先以特定的大小启动(例如，700×
浏览 8提问于2011-12-03得票数 2
回答已采纳
1回答
我将这个绝对div居中：
<div style="
width:800px;
height:190px;
position:absolute;
left:50%;
margin-left:-400px;
border-width:10px;
border-style:solid;">
</div>
在最大化模式下，它可以正常工作。但是当浏览器的宽度小于div时，我无法滚动到div的左侧，它被剪切了。我在Chrome和IE9上测试过
如何在窗口模式下将绝对div居中？它不一致的原因是什么？
浏览 6提问于2013-05-05得票数 0
1回答
下面是HTML代码
<div class="body-content" id="content"></div>
<%@ include file="common/aside.jsp"%>
<%@ include file="common/footer.jsp"%>
我有一个导航菜单栏，通过上面所示的content中的ajax调用加载json数据。json数据只是中显示的对象数组。然后我有一个旁白，在页面的右边显示我的应用程序的档案。
对于最大化的浏览器窗口
浏览 4提问于2013-03-20得票数 0
如何在另一个元素中将div缩放到100%的高度和宽度？在我的例子中，是一个改进的td。因为我是一个插件，我不能控制页面上的其他HTML。这是我的HTML：
<body style="height:100%;">
<table width="600px" height="400px" border="1">
<tr>
<td style="background-color:silver;">Cell 1</td>
<
浏览 3提问于2009-02-21得票数 5
1回答
我想调整一下网页浏览器的左边距。我使用windowResize，但如何调整左边距，即使自定义点击网页浏览器的恢复按钮？我上传了2张短屏图片来解释。
首先，我打开网页浏览器而不是最大化，所以页面做了一个windowResize并计算左边距，然后我点击窗口最大化，然后获取
第二个图像，但内容不在页面的中心。如何做一个正确的windowResize？谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
浏览 1提问于2011-01-22得票数 1
回答已采纳
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 well">
<div class="clearfix control-group">
<div class="input input-prepend">
<label class="add-on"><
浏览 2提问于2013-06-14得票数 1
我正在创建一个测试项目，一个chrome打包的应用程序。在html/css中，我将条样式设置为宽度: 100%，但当我最大化我的应用程序时，它就像半个屏幕一样。
下面是一些截图：
第一个条就是问题所在，它的宽度: 100%，但它不工作。我的那个部分的html：
<section id="main" style="width: 100%; height: 100%;">
<div id='jqxWidget' style="width: 100%;">
浏览 0提问于2013-06-20得票数 0
当浏览器窗口使用jquery最大化或调整大小超过1600px时，我如何隐藏HTML div？
我目前已经设置了div，所以当页面加载时大于1600px时div会隐藏，但无法在页面加载后最大化窗口或调整大小时隐藏它。下面是我使用的代码：
if ($(window).width() > 1600) {
$('#next').hide();
$('#back').hide();
}
任何帮助都将不胜感激。
$(window).bind('resize', function(){
if ($(window).width() >
浏览 7提问于2011-07-23得票数 0
回答已采纳
我安装了一个react-lightbox-component依赖项，但它没有显示最大化的缩放图像。有人知道我是不是走错了路吗？ 这是组件官方页面https://www.npmjs.com/package/react-lightbox-component 我运行了yarn add react-lightbox-component，并通过导入react-component创建了这个组件。 import React, { Component } from 'react'
import Modal from 'react-responsive-modal';
impo
浏览 13提问于2019-02-15得票数 1
回答已采纳
关于我之前的问题；。为了有一个滑块，我使用了这个解决方案：
HTML
<div class="bigBox">
<div class="try2">
<h3 id="test2">CLICK THIS</h3>
<p>This is a demonstration of jQuery SimpleDialog.</p>
</div>
<div class="try"&
浏览 1提问于2012-05-14得票数 1
回答已采纳
我有一个网站建立的div浮动到页面的各个部分，以创建我想要的外观。我的问题是，当我把我的浏览器变小时，所有的浮动都塞满了左边，而不是保持它们的位置并简单地给出一个滚动条。
我只想让我的页面在浏览器没有最大化的情况下保持它们的形式。
浏览 1提问于2011-11-10得票数 1
3回答
我是网页设计新手。我想设计2个盒子，其中一个在左边，另一个在右边。这些框在浏览器最大化状态下是固定的，但当我调整浏览器大小并使其最小化时，右侧框从左侧框向下移动。
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<link type="text/css" rel="stylesheet" href="style.css" />
<ti
浏览 0提问于2012-11-23得票数 0
回答已采纳
1回答
我与ReactJS广告公司的广告斗争了几个小时：
这是我的代码：
export default class AdJobDetail extends React.Component {
componentDidMount() {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render() {
return (
<div className={style.container}>
<ins c
浏览 2提问于2017-08-16得票数 2
我创建的.html页面加载的swf文件使用swf文件，默认情况下，编程加载在最大化的state.Now，我面临的问题是，当我启动的swf文件在html页面显示最大化的内容，我们需要最大化或最小化的IE来查看普通的state..Is中的swf内容，有任何方法显示的swf内容不是在最大化状态的html页面。
下面是我的代码，
<script type="text/javascript">
swfobject.embedSWF("TestApplication.swf", "myContent", "100%", &
浏览 2提问于2012-09-13得票数 0
回答已采纳
1回答
在我的应用程序中，我构建了一个进度条，它在我的向导中用于3个场景。我通过在进度条上设置一个类添加了一个平稳的转换，当您从步骤1导航到步骤2和步骤2到3时，它运行平稳，但是当您向后导航时，它看起来不那么平稳，因为转换没有向后运行。
我对这个问题的问题是，我如何向后追溯这个过程，以知道用户之前在哪里，比如说步骤3，它返回到stap 2，转换需要向后工作以保持平滑。
我应该在localStorage中存储一些值来跟踪用户步骤吗？或者，还有其他方法来处理这种向后工作的过渡吗？
ReactJS ProcessBar
import React from 'react';
import cl
浏览 1提问于2017-05-09得票数 0
我删除了电子框架，并添加了自定义按钮，用于折叠、关闭和最大化/最小化。
折叠和关闭可以很好地工作，但是最小化/最大化会闪烁并返回全屏
const [bounds, setBounds] = useState({width: 600, height: 600, x: 50, y: 50})是默认边界
useEffect(() => {
if (maximized) {
remote.BrowserWindow.getFocusedWindow().maximize()
} else {
//here is a prob
浏览 13提问于2019-11-10得票数 1
回答已采纳
4回答
我使用的是Win XP，但这个问题在Firefox、IE和Google Chrome上都会出现。我想在同一水平面上对齐两个DIVs。我希望左边的div占据屏幕的24%，右边的div占据剩下的部分。当我的浏览器被最大化时，一切看起来都很好，但当我单击调整大小按钮使窗口变小时，两个DIVs不再位于同一平面上。右DIV的顶部显示在左DIV的下边缘的下方(右DIV的左边界仍然正确地对齐在左div的右边界之后)。
如何使两个DIVs出现在同一水平面上，即使窗口未最大化？这是我正在使用的HTML ...
<div class="header">
<img src=
浏览 0提问于2012-01-26得票数 2
回答已采纳
当浏览器最大化时，带有“一些文本”的第二个div会落在图像下方，即使使用了下面的代码。在引导列中插入图像时，会发生奇怪的事情吗？
<div class="row">
<div class="col-lg-6 " >
<img src="images/goodtimes.jpg" alt=""/>
</div>
<div class="col-lg-6 ">
浏览 3提问于2016-09-25得票数 0
我已经将清单文件中的大小设置为false，它在windows 7上运行良好(禁用了最大化按钮)，但是在OSX上，最大化按钮没有禁用，并且仍然可以放大窗口。
有办法解决这个问题吗？我试着寻找有关这个问题的信息，但是这些信息在3年前就过时了，解决方案也不再适用。
浏览 3提问于2015-08-19得票数 0
回答已采纳
1回答
我使用Ubuntu12.04双显示器。
显示1: Thinkpad T420s。英特尔HD3000
显示2: HP 1955。
每当我想最大化显示1中的窗口(比如Chrome浏览器)时，它就会自动显示2。
我尝试了几种使窗口最大化的方法(快捷方式，最大化按钮，鼠标拖动到顶部)，结果是一样的。
知道怎么解决这个问题吗？
浏览 0提问于2012-11-08得票数 7
可能是一个超级新手的问题，但是有人知道为什么我的onClick不能启动吗？我曾尝试更改CSS中的z索引，以防按钮太靠后，但这并没有改变任何东西。 这是我的按钮模块： import React from 'react';
import classes from './button.module.css';
const button = (props)=>{
return(
<button onClick={()=>{console.log("hello");props.select()}} class
浏览 30提问于2019-10-03得票数 0
我的html和css如下所示
.section {
display: flex;
}
.section > .zone:first-child {
flex: 1;
}
<div class="section">
<div class="zone">
[content]
</div>
<div class="zone">
[content]
</div>
</div>
这就是我想要的，它是两列，第一列的宽度是最大化的，第二
浏览 4提问于2016-09-07得票数 0
我有这样的结构：
img {
width: auto;
height: 200px;
}
.cards {
display: flex;
justify-content: center;
margin-top: 2em;
width: 80%;
flex-wrap: wrap;
}
.card {
margin: 1em;
box-shadow: 0 0 6px #000;
object-fit: cover;
}
.info {
padding: 1em;
border-top: non
浏览 5提问于2021-07-17得票数 1
回答已采纳
1回答
在Ubuntu的多个版本上，Vim和Neovim在终端的右侧显示出一个可怕的缺口，当它被最大化时。
这是Gnome终端：
📷
这是Konsole：
📷
当终端没有最大化时，这种情况不会发生，因为只有在Gnome终端的情况下，它才会向右扩展什么是完全字符像素宽度。这个问题也只发生在Vim色彩方案中，它将背景画成与终端背景不同的颜色，例如在上面的gnome图片中，dw_green，或者用于Konsole。
有没有办法改变Vim/Neovim的行为，迫使他们在没有完整字符空间的情况下直接画到边缘？
浏览 0提问于2020-04-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
