将HTML标签设置为100％高度

Question

我正在尝试将HTML元素的高度设置为100％。 在移动设备上，此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灰色背景，但这仅仅是因为它具有填充。

Screenshot here

第二次尝试： Second image

Answer 1

在整行中使用最小高度100vh ...

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

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

https://www.codeply.com/go/vTYz8XE6cG

桌面：

手机：

Answer 2

要使用height:100%;，父元素应该有一个height: fixedHeight;，因为它对您不起作用。

https://www.w3schools.com/cssref/pr_dim_height.asp

  

％定义包含块的百分比的高度

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

有关vh

的更多信息

Make a div 100% height of the browser window

那里说：

  

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，它们会相应缩放。