html - 为什么高度和最小高度对子容器的影响不同？

Question

在我的 css 中，我将父级的高度设置为 75px，将子级的高度设置为 100%，并且显示正确。但是，当我将父级的高度属性更改为 75 像素的最小高度时，子级会缩小到它包含的文本的高度，但父级的高度保持 75 像素。为什么孩子不停留75px？

#parent{
    height:75px;
    background-color:navy;
    clear:left;
    }
#child{
    width:300px;
    height:100%;
    background-color:aqua;
    float:left;
    }

在这里，孩子应该是 75px。

#parent{
    min-height:75px;
    background-color:navy;
    clear:left;
}
#child{
    width:300px;
    height:100%;
    background-color:aqua;
    float:left;
    }

孩子现在只有 21px 高。

Answer 1

我相信这是 CSS 中长期存在的错误（或“功能”）。见https://stackoverflow.com/a/3808701/1608085

简而言之，您可以使用

min-height: inherit; 

在子级中正确地从父级继承 min-height 属性。