14


我用最小高度创建了一个 div 标签，并给出了背景颜色“红色”。但是在 Mozilla Firefox 上，当内容超过最小高度限制时，div 的高度不会增加。这是我的代码：

<style type="text/css"><!--
ul {
    display:block;
    padding:0px;
    width:500px;
}

.b {
    width:250px;
    float:left;
    display:block;
}

div {
    min-height:50px;
    width:500px;
    background-color:red;
}
--></style>

<div>
    <ul>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
    </ul>
</div>

似乎必须将 div 高度设置为适合内容，但我不知道我还能怎么做。如果我不使用高度，则无法设置背景颜色。请告诉我我该怎么做使内容适合 div 以及背景颜色为红色。
（不知道我是否解释清楚。所以如果您想了解更多有关该问题的信息，请询问我。）

-谢谢。

已解决：谢谢大家的友好回答。

4

8 回答 8

31

在 Firefoxmin-height上，不解释display: table(-*);属性，只是尝试使用height: 50px;它，因为它被解释为表格上的最小高度。

来源

于 2014-08-29T13:22:46.100 回答
15

所有主流浏览器都支持 min-height 属性。

但是这个属性不适用于 Firefox 上的 html 表。

于 2013-10-09T07:23:51.350 回答
8

像这样更新你的CSS：

div{min-height:50px;width:500px;background-color:red;overflow:hidden;}

overflow:hidden;添加

基本上，这是因为 float:left在.b课堂上发生的。这就是它的工作原理。通常您可以通过添加overflow:hidden到父 div 或添加 style="clear:both;" 的元素来修复它 在父 div 的末尾。

您可以使用“CSS clearfix”关键字搜索有关它的更多信息。

于 2012-12-27T10:36:28.933 回答
2

当元素的显示设置为表格时，Firefox 将忽略 min-height 属性而不实际设置高度。

通过将元素切换为 display:block，firefox 然后尊重 min-height 属性。

于 2015-05-11T18:09:44.333 回答
1

添加overflow: hidden;到ul.

问题是您LI的 s 是浮动的，这导致父级不知道其内容的高度。

于 2012-12-27T10:36:50.033 回答
1

我添加了以下内容并且有效：

body {
  height:100%;
}
于 2016-03-03T08:53:53.793 回答
0

您必须像这样清除嵌套的 li 标签的浮动：

ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
于 2012-12-27T10:37:23.577 回答
0

而不是最小高度：50px；只需添加填充：25px 0；

于 2017-01-09T14:17:28.183 回答