正常情况下,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值