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灰色背景，但这仅仅是因为它具有填充。

第二次尝试： Second image

Answer 1

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

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

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

桌面：

手机：

Answer 2

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

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

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

有关vh

的更多信息

那里说：

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