【前端】min-height和height的疑问？

div1的高度为什么设置min-height后sp1和sp2的高度没有撑起了呢？为什么把div1的min-height改成height后sp1和sp2就撑起来了？min-height不能替代height使用吗？
【前端】min-height和height的疑问？
【前端】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>

回答

父元素设置了 min-height但没有设置 height时候，子元素的height 和 min-height 不会生效
子元素的 height 或是 min-height 是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度

参考：
height与min-height的百分比问题和铺满屏幕的布局方法
Child inside parent with min-height: 100% not inheriting height

min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。

mark下，也有此疑问

恭喜你找到一个远古的bug
https://bugs.webkit.org/show_...
https://stackoverflow.com/que...
至今未被修复

min-height就是你设置的这个元素的最小高度，因为在浏览器里容器的大小可能会被其中的内容撑大，设置这个属性后就能保证你的布局正确，因为它最小不会小于你设的那个值

可能有以下几点问题
1 你用的IE,我记得IE8还是6 不支持min-height
2 min-heihgt是否设置成百分比了？ 如果设置百分比给父级元素一个高度

2019年了，仍未修复

以上是 【前端】min-height和height的疑问？ 的全部内容， 来源链接： utcz.com/a/79644.html

回到顶部