如何将 div 扩展到整个页面？ [复制]答案

【问题标题】：How to extend div to the entire page? [duplicate]如何将 div 扩展到整个页面？ [复制]
【发布时间】：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，我会得到不想要的结果，但内容会超出页面。

（内容渲染是动态的，所以我不知道什么时候内容会超出，什么时候不会）。

编辑： 当我压缩窗口时，表格不会挤压，溢出的部分也不会跟随背景颜色，但即使滚动，高度也会跟随背景颜色。

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您可以使用： height: 100% !important;

【讨论】：