html - 无法将包含子 div 的父 div 的背景颜色设置为黑色

Question

这是没有高度属性：http: //jsfiddle.net/karthik64/pFcpX/

这与高度属性：http: //jsfiddle.net/karthik64/pFcpX/1/

问题是我需要设置一个固定的“高度”属性以使背景颜色为黑色，如果我从 CSS 属性中删除高度属性，背景颜色将不会是黑色。我必须告诉你，我的 div 的高度是动态的。这取决于从数据库中获取的数据。

我已经尝试过!important，类似的东西，但它没有奏效。

Answer 1

添加overflow: hidden到外部的样式div

看到这个JsFiddle

Answer 2

我只是稍微更改了您的代码。我在最后一个关闭 div 之前添加了一个 div，并添加了一个类名 clearfix。并添加clear:both到清除修复类。现在你可以在任何有浮动 div 的地方使用这个类。

HTML：

<div style="width:690px;background-color:#000000;margin-left:40px;margin-top:4px">


        <div style="float:left;width:310px;font-family:Arial,Helvetica,sans-serif;padding-left:30px; color:#fff;"> 

        <div style="font-size:1.6em;margin-top:15px"> Hello! </div>

        <div id="iamm"> Niko </div>

        <div style="font-size:12px"> I'm a Student               </div>

        <div style="font-size:12px"> gender Male                 </div>

            <div style="font-size:12px"> I stay at India </div></div>

    <div class="clearfix"></div>
</div>

检查小提琴：http: //jsfiddle.net/pFcpX/9/

Answer 3

将以下给定的 css 添加到您的样式表中，并在您遇到此问题时使用此类 clearfix。它用于 HTML5 Bolerplate。

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

这是小提琴：http: //jsfiddle.net/pFcpX/10/

我将此类清除修复添加到具有黑色背景的顶部 div 中。