一尘不染

CSS最小高度无法在Mozilla FireFox上使用

css

我创建了一个min-height的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高度设置为适合内容,但是我不知道该怎么办。如果我不使用height则不能设置背景色。请告诉我如何使内容适合div,背景颜色将变为红色。
(不知道我是否解释清楚,所以请问我是否想进一步了解该问题。)

-谢谢。

解决: 谢谢大家的 友好 回答。


阅读 266

收藏
2020-05-16

共1个答案

一尘不染

像这样更新您的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”关键字搜索有关它的更多信息。

2020-05-16