2

我遇到了 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、height 和 max-height 这里只有 min-height 有效。例如：#container { min-height:100px; 高度：180px；max-height:20%} 这里容器的高度从 100px 到 180px 不等。最大高度被省略。

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

4

1 回答 1

0

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

  1. 您正在应用height:100%到每个li元素。这意味着每个li都与其父元素一样高，ul. 所以现在里面的内容ul是自身高度的 4 倍ul，因为里面有四个li，每个ul. 在我的小提琴中，您可以看到项目符号溢出其父级。

  2. 基于百分比的高度（或宽度）基于父高度。您在文档中指定的唯一高度是min-height:180px. 您会在我的 Fiddle中注意到，在我将实际高度（不是最小高度）应用到父容器之前，您想要的基于百分比的布局没有实现。如果没有实际的高度值height:auto，浏览器不确定如何计算基于百分比的高度。我应该注意，宽度不是这种情况。如果您只指定元素宽度的百分比，浏览器就知道它的计算基于浏览器窗口。

于 2013-04-29T22:59:59.043 回答