Question

我在眨眼，壁虎和三叉戟发动机上进行了测试。第一个div的渲染高度为零。如果添加高度（无论什么值），绿色子项都可见，并且最小高度处于活动状态。

<html><head>
<title>min-height and missing height</title>
</head>
<body style="width: 1024px; height: 768px;">
    <div id="outer" style="
min-width: 100%;min-height: 100%;
position:absolute;
left: 0px;top: 0px;
/* height:0; */
">
        <div id="inner" style="background-color:green;height:100%;width:100%"></div>
    </div>

</body>
</html>

Spec说

如果未明确指定包含块的高度（即，它取决于内容高度），而这个元素不是绝对定位，百分比值被视为＆＃39; 0＆＃39; 0 （对于＆＃39; min-height＆＃39;）或＆＃39; none＆＃39; （对于＆＃39; max-height＆＃39;）。

但由于我们有一个固定高度的包含块，我不认为这部分真的描述了崩溃背后的原因。

有人解释（和解决方法）吗？我可以添加一个假高度：0但这在我的应用程序中非常昂贵，因为所有维度都可以随时更改。

Answer 1

......即使父母的身高已经确定，div也会崩溃

嗯不，在这种情况下，父级的高度是不固定，body有固定的高度，但它不是内部div的父元素（它是'grand' -parent'）。

此外，内部div并非绝对定位 - 所以 - 就像规范所说：内部div的计算高度将为0.

一个简单的解决方法是将position:absolute添加到内部div。

body {
  width: 1024px;
  height: 768px;
}
.outer {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  border: 1px solid green;
  /* height:0; */
}
.inner {
  background-color: green;
  height: 100%;
  width: 100%;
  position: absolute; /* <-- added this */
}

<div class="outer">
  <div class="inner"></div>
</div>

使用top：0px; min-height：100％即使父级的高度固定，div也会折叠

1 个答案: