如何将 div 扩展到整个页面？ [复制]
Posted
技术标签:
【中文标题】如何将 div 扩展到整个页面？ [复制]【英文标题】：How to extend div to the entire page? [duplicate] 【发布时间】：2019-10-26 13:58:45 【问题描述】：我正在尝试为我的 React 应用程序中的页面设置背景颜色。我想设置一个延伸到整个页面长度和宽度的背景颜色，但我不能这样做，对于超出范围的表单或表格，我将高度/宽度或最小高度/最小宽度设置为 100%，我得到了结果较大的内容，但对于较小的内容，我明白了：
我想要整个页面都是蓝色的。
这是我的css文件
.body
margin:0px 0px 0px 0px;
background-color:#4086ef;
padding:10px;
height:100%;
width:100%;
如果我将高度设置为 100vh，我会得到不想要的结果，但内容会超出页面。
（内容渲染是动态的，所以我不知道什么时候内容会超出，什么时候不会）。
编辑： 当我压缩窗口时，表格不会挤压，溢出的部分也不会跟随背景颜色，但即使滚动，高度也会跟随背景颜色。
【问题讨论】：
将min-height 添加到100vh
您是否将样式添加到 <body> 。如果是这样，您必须删除 .来自css中的.body
不，它是一个外部 css 文件。
宽度不起作用，如果我打开开发工具，向右滚动，背景是白色的，我尝试设置宽度和最小宽度：100vh；
将min-width 添加到100vw
【参考方案1】：
你只需要添加height:100vh。这样它就会覆盖你的整个屏幕。
【讨论】：
工作但最小高度：100vh，虽然添加 100vh 会扩展页面长度并在不需要时提供滚动选项。另外，％和vh有什么区别？我知道 vh 给出了相对于浏览器高度的值。 100vh 表示 100% 视口高度，其中 100% 表示父元素高度。通常两者在 body 标记中的工作方式相同，因为它是我们的父元素。此外，如果 100vh 为您提供滚动条，那么您可以在其中设置溢出：隐藏属性body标签。但通常100vh不会给出滚动条。滚动条可能有其他原因。【参考方案2】：试试这个
*
box-sizing: border-box;
body
margin: 0;
div
background: red;
color: white;
min-height: 100vh;
padding: 10px;
<div>
Test
</div>【讨论】：
实际上它是一个反应应用程序，我必须为每个 div 分配一些 id 或类，所以我不认为 * 会起作用，并且在正文中包含它也不起作用。 这是一个普通的css 我正在使用模块化方法，如您所见，我使用的是 .body 而不是 body，无论如何我尝试过但没有成功。【参考方案3】：您可以使用：
height: 100% !important;
【讨论】：
以上是关于如何将 div 扩展到整个页面？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何扩展 iFrame/将内容从 iFrame 移动到 div？ [复制]
如何将样式应用于页面 iframe 内的 div？ [复制]
如何将css添加到与搜索框中的单词匹配的div中的单词？ [复制]