将 HTML 标记设置为 100% 高度 [重复]答案

【问题标题】：Set HTML tag to 100% height [duplicate]将 HTML 标记设置为 100% 高度 [重复]
【发布时间】：2019-05-08 04:38:42
【问题描述】：

我正在尝试将 100% 的高度设置为 HTML 元素。在移动设备上，这个 div 会在 .div_left div 下，浮动会被清除。

我的主题上有这些 div：

<div class="col-md-7 div_left"></div>
<div class="col-md-5 div_right"></div>
<div class="clearfix"></div>

我给他们这个 css：（也包括全局 bootstrap.css）

.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}

我尝试了height:100vh;，但它不起作用，因为页面有很多内容，我可以垂直滚动它。

我也尝试过min-height:100%，但没有奏效。我可以看到正确的 div 灰色背景，但这只是因为它有填充。

第二次尝试： Second image

【问题讨论】：

你能澄清你的问题吗？例如，向我们展示它现在的样子以及您希望它的样子？
请清理 HTML 并提供足够的资源来重现问题。为什么不使用min-height:100vh？
我写了，这就是为什么 100vh 不起作用。
你说height:100vh 和min-height:100% 不起作用，不是 min-height:100vh。请澄清问题以及您尝试过的确切内容。 “当页面有很多内容时，我可以垂直滚动它”到底是什么意思？预期的行为是什么？额外的内容会被隐藏并且无法访问吗？你希望滚动条在其他地方吗？
我在帖子中添加了一张图片。你可以在上面看到，我有很多内容，我向下滚动了网站。当我滚动时，灰色背景将结束，这就是 100vh 不起作用的原因。

【解决方案1】：

在整行上使用 min-height 100vh...

.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}

.mvh-100 {
    min-height: 100vh;   
}

桌面：

手机：

【讨论】：

没有。我在帖子中添加了一张图片，带有第二个名字。这就是你的代码所做的，我将它复制到我的文件中。
不，这不是代码的作用。看演示。您没有明确说明预期的内容。如果它不起作用，您有其他影响布局的 CSS 或 HTML。
在 html 中，div 有弹性类。这些在 css 中添加到哪里？
它们是 Bootstrap 的一部分，但它们不是 min-height:100vh 工作所必需的。您会看到演示在没有这些的情况下也可以正常工作，但它们可用于更改桌面与移动布局。但是，由于您还没有弄清楚会发生什么，这一切都是猜测。
现在我明白了，我在 mv-100 类中添加了 display:flex。现在，高度很好，但是 div 在移动视图中浮动，它们不会相互向下。

【解决方案2】：

要使用height:100%;，父元素应该有height: fixedHeight;，因为它不适合你。

% 定义包含块的高度，以百分比表示

您需要定义的是：100% 是什么？

那里说：

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

【讨论】：