blocks|key|711152|text|请按以下方式更新css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|711153|div{min-height:50px;width:500px;background-color:red;overflow:hidden;}|code-block|syntax|javascript|711154|overflow:hidden;添加|offset|length|style|CODE|711155|基本上，这是由于float:left在.b类中发生的。这就是它的工作原理。通常，您可以通过将overflow:hidden添加到父div或在父div末尾添加一个style=元素“清除:两者”来修复它。|711156|您可以通过“CSS清除”关键字搜索有关它的更多信息。|711157|entityMap^0|0|0|0|G|0|8|A|J|2|1A|F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]|$I|10|J|11|K|L]|$I|12|J|13|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

Update your css like this: 

<pre><code>div{min-height:50px;width:500px;background-color:red;overflow:hidden;}
</code></pre>

<code>overflow:hidden;</code> added

Basically, that happens because of <code>float:left</code> in <code>.b</code> class. That is how it works. Usually you can fix it by adding <code>overflow:hidden</code> to parent div or by adding an element with style="clear:both;" at the end of parent div.

You can search more info about it with 'CSS clearfix' keywords.

blocks|key|507286|text|将overflow:+hidden;添加到ul。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|507287|问题是您的LI是浮动的，这导致父服务器不知道它的内容的高度。|507288|entityMap^0|1|H|L|2|0|5|2|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Add <code>overflow: hidden;</code> to <code>ul</code>.

The problem is that your <code>LI</code>s are floated which causes the parent to not know the height of it's contents.

blocks|key|716638|text|您必须清除嵌套的li标记的浮点，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716639|ul:after+{
++++content:+".";
++++display:+block;
++++clear:+both;
++++visibility:+hidden;
++++line-height:+0;
++++height:+0;
}|code-block|syntax|javascript|716640|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You'll have to clear the floating of the nested li tags like this:

<pre><code>ul:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
</code></pre>

blocks|key|507316|text|在所有主要浏览器中都支持min高度属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507317|但是这个属性不适用于firefox上的html表。|507318|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The min-height property is supported in all major browsers.

But this property is not working with html tables on firefox.

blocks|key|715607|text|在火狐上，min-height不是在display:+table(-*);属性上解释的，而是尝试使用height:+50px;，因为它被解释为表上的最小高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715608|Source|715609|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4875039/unable-to-get-min-height-to-work-on-table-in-firefox-3-6^0|5|A|I|J|1E|D|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

On Firefox, <code>min-height</code> is not interpreted on <code>display: table(-*);</code> properties, juste try to use <code>height: 50px;</code> instead as it is interpreted as minimum height on tables.

<a href="https://stackoverflow.com/questions/4875039/unable-to-get-min-height-to-work-on-table-in-firefox-3-6">Source</a>

blocks|key|715619|text|当元素的显示设置为表时，firefox将忽略min高度属性，而不实际设置高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715620|通过将元素切换为display:block，firefox就尊重了min高度属性。|715621|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

When an element's display is set to table, firefox will ignore the min-height property without actually setting the height. 

By switching the element to display:block, firefox then respected the min-height property.

blocks|key|507386|text|我补充了以下几点，并取得了成效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507387|body+{
++height:100%25;
}|code-block|syntax|javascript|507388|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have added following and it's worked:

<pre><code>body {
 height:100%;
}
</code></pre>

blocks|key|507423|text|而不是最小高度:50+of；只需添加填充:25+of+0；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507424|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

instead of min-height:50px; just add padding: 25px 0;

I created a div tag with min-height and gave background color 'red'. but on mozilla firefox the height of the div not increasing when the content crosses min-height limit. heres my code:

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

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

div {
 min-height:50px;
 width:500px;
 background-color:red;
}
--&gt;&lt;/style&gt;

&lt;div&gt;
 &lt;ul&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;li class="b"&gt;asdsad&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

its seeming the div height would have to be set to fit contents,but I don't know how else can I do that.if I don't use height then background-color can't be set.please tell me how can I fit the contents to the div as well as the background color would be red. 
(Don't know if I explained it clearly.so please ask me if you want to know more about the question.)

-Thanks.

RESOLVED: thank you everybody for your kind answers.

CSS min-height not working on mozilla firefox

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我创建了一个极小高度的div标签，并给背景颜色‘红色’。但在mozilla上，当内容超过最小高度限制时，div的高度不会增加。这是我的代码：<style type="text/css"><!--ul { display:block; padding:0px; width:500px;}.b { ...

问CSS min- mozilla firefox不工作的高度
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS min- mozilla firefox不工作的高度EN