Question

我遇到了一个div及其子高度的最小高度问题。我知道发生了什么，但我不知道如何解决它。

我有这个HTML：

<div id="container">
<img src="#"/>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

样式表：

#container { min-height:180px; max-height:20%;}
#container img { height:60%;}
#container ul { height:40%; padding:10px;}
#container ul li { height:100%; float:left;}

我正在尝试的是申请UL，即父母的40％。我得到的是UL获得窗口的高度，而不是它的父级。如果我只放一个最大高度或固定高度，它就可以工作。

我在创建项目时或类似的东西时出现了问题，但我不确定IMG是否达到其父级的高度

任何解决方案？

我认为，由于@ Jay-Bee-Why，我终于接近了解决方案，但我没有得到它。

案例1- 容器高度：180px，最大高度：20％然后容器流动，并将其子节点移动到最大高度，但最小值没有限制，所以问题没有解决

案例2- 容器具有最小高度，高度和最大高度这里只有min-height工作。例如： #container {min-height：100px;高度：180像素;最大高度：20％} 容器的高度从100px到180px不等。 max-height被省略。

正如我在评论中解释的那样，我正在寻找的是一个DIV，其高度可变，从窗口浏览器高度的180px到20％，包含两个项目。 IMG，其父母身高的60％，以及其中40％的UL，有一个浮动的LI，其父母身高为100％。

Answer 1

您应该在问题中包含更多细节，包括工作图像。但是看看我的Fiddle here，您会看到一些可能的解释。

您正在将height:100%应用于每个li元素。这意味着每个li都与其父元素ul一样高。所以现在ul内的内容是ul本身的高度的4倍，因为每个li的大小都有四个ul。在my Fiddle中，您可以看到子弹点溢出其父级。
基于百分比的高度（或宽度）基于父高度。您在文档中指定的唯一高度是min-height:180px。您会在my Fiddle中注意到，在我将实际高度（不是最小高度）应用于父容器之前，您未达到所需的基于百分比的布局。除height:auto之外没有实际高度值，浏览器不确定如何计算基于百分比的高度。我应该注意到宽度并非如此。如果仅指定元素宽度的百分比，则浏览器知道将其计算基于浏览器窗口。

具有最小高度的父DIV和具有百分比高度的子项不起作用

1 个答案: