min-height和height的疑問(wèn)？

div1的高度為什么設(shè)置min-height后sp1和sp2的高度沒(méi)有撐起了呢？為什么把div1的min-height改成height后sp1和sp2就撐起來(lái)了？min-height不能替代height使用嗎？
圖片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #div1{width: 100%;min-height: 50px;background-color: yellow;}
    #sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}
    #sp2{width: 50%;height: 100%;display: inline-block;background-color: red;}
    </style>
</head>
<body>
<div id="div1">
    <span id="sp1">aaa</span>
    <spanv id="sp2">bbb</span>
</div>
</body>
</html>

回答

編輯回答

舊顏

mark下，也有此疑問(wèn)

2018年4月5日 08:10

編輯回答

朽鹿

min-height就是你設(shè)置的這個(gè)元素的最小高度，因?yàn)樵跒g覽器里容器的大小可能會(huì)被其中的內(nèi)容撐大，設(shè)置這個(gè)屬性后就能保證你的布局正確，因?yàn)樗钚〔粫?huì)小于你設(shè)的那個(gè)值

2018年5月24日 17:01

編輯回答

寫(xiě)榮

min-height表示盒子的最小高度，并不表示盒子的最終高度，站在外部盒子的角度理解是外部最終高度是由盒子的內(nèi)部元素的高度與當(dāng)前盒子的最小高度共同決定。
在外部盒子等待內(nèi)部元素計(jì)算出高度時(shí)并不知道自己的高度，內(nèi)部盒子高度相對(duì)外部盒子設(shè)置高度時(shí)也未知外部高度，所以按照自己的內(nèi)容的情況渲染了，最終的效果就是內(nèi)部盒子高度與外部無(wú)關(guān)。

2017年9月5日 17:31

編輯回答

司令

可能有以下幾點(diǎn)問(wèn)題
1 你用的IE,我記得IE8還是6 不支持min-height
2 min-heihgt是否設(shè)置成百分比了？如果設(shè)置百分比給父級(jí)元素一個(gè)高度

2018年8月20日 23:34

編輯回答

尋仙

恭喜你找到一個(gè)遠(yuǎn)古的bug
https://bugs.webkit.org/show_...
https://stackoverflow.com/que...
至今未被修復(fù)

2017年7月2日 21:10

編輯回答

陪我終

父元素設(shè)置了 min-height但沒(méi)有設(shè)置 height時(shí)候，子元素的height 和 min-height 不會(huì)生效
子元素的 height 或是 min-height 是否生效，基于父元素是否設(shè)置了固定高度或者是一個(gè)有效百分比高度

參考：
height與min-height的百分比問(wèn)題和鋪滿屏幕的布局方法
 Child inside parent with min-height: 100% not inheriting height

2017年2月12日 01:34