min-height在安卓下不起作用

正常情况下,min-height可以当height使用

 如:


<div class="father">
  <div class="child"></div>
</div>

style样式为:
.father{
    min-height: 200px;
    font-weight:bold;">#000;
}
.child{
    min-height: 50px;
    font-weight:bold;">red;
}

  效果是这样的。

当子元素超过父元素的高后,父元素会自动加宽

    .father{
            min-height: 200px;
            background-color: #000;
        }
     .child{
           min-height: 250px;
           width: 300px;
           background-color: red;
      }

但是当父元素被

display:table后,min-height就会失效了,也就是不能当height使用了,注意:在安卓上失效,在ios上依然是正常的

这里就不截图了。

怎么解决呢?

就是我们在设置min-height同时,把父元素的height也给设置成min-height的值,
min-heigh的值有一个特性,就是当子元素的高度超过min-heght的值时,他会把子元素的高度值复制给自己。这里就会覆盖掉我们之前设置的height值


原文地址:https://www.cnblogs.com/shuiche/p/5319852.html