高度百分比css无法正常工作

Question

我正在尝试制作响应列，它们必须具有父div的40％高度。但它不起作用。

这是我的HTML：

            <div class="row brands">
                <div class="col-xs-12 col-md-6 brand-container">

                </div>
                <div class="col-xs-12 col-md-6 brand-container">

                </div>
            </div>

这是我的CSS：

.brands {
   background-color: green;
   min-height: 100%;
}

.brand-container {
  background-color: red;
  height: 40%; 
}

当我在我的电脑上运行网络时，它工作得很完美，但它在我的手机上无效。

我正在使用Bootstrap。

我已将vh值更改为％，但它还无效。

Answer 1

嗯有可能，它是由于vh值引起的。某些版本的移动浏览器不支持它。看这里：

  

http://caniuse.com/#feat=viewport-units