Question

这让我疯了，我显然错过了一些我无法看到的东西。

我有一些嵌套的div - 下面。

<!DOCTYPE html>
<html>
<head>
    <title>Immigration Reform</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>

<link rel="stylesheet" type="Text/css" href="css/test.css" media="screen" />

<div class="HeaderWrap">
    <div class ="Header">
        <div class="HeaderLogo"></div>
    </div>
</div>  

<div class="BodyWrap">
    <div class="Body">  
        <div class="BodyLeft"></div>
        <div class="BodyRight"></div>   
    </div>  
</div>

<div class="FooterWrap">
    <div class="Footer">
        <div class="FooterPicture"></div>
        <div class="Footer1"></div>
        <div class="Footer2"></div>
        <div class="Fotter3"></div>
        <div class="Footer4"></div>
    </div>
</div>

</body>
</html>

无论我做什么，当孩子的div超过最小高度时，.Body身高不会自动调整。

CSS CODe

.HeaderWrap,
.BodyWrap,
.FooterWrap{float:left; width:100%; border:1px solid yellow; clear:both;}

.Header,
.Body,
.Footer{width:960px; border: 1px solid green; margin:0 auto; clear:both;}

.Header{height:227px; background:url("../Images/man-with-flag-1.png") no-repeat;#box-shadow: 0 0 20px 0 black; z-index:-1; clear:both;}
.HeaderLogo{float:left; height:100px; width:150px; box-shadow: 10px 10px 5px #000000; background:url("../Images/visa.png") no-repeat; position:relative; right:-45px; bottom:-165px; border:5px solid white; z-index:999;clear:both;}

.BodyWrap {border: 1px solid red;}
.Body {position: relative; border: 1px solid green; min-height: 450px; clear:both;}

.BodyLeft{float:left; height:900px; #min-height: 900px; border:1px solid yellow; position: relative; #top: -90px; z-index:-1;background:#b1b6bc; #box-shadow: 0 0 15px 0  black; width:26%; clear:both;}

我缺少什么？谢谢。

Answer 1

.Body元素不会垂直展开，因为其子元素已浮动which removes the children from the normal document flow。

为了.Body随着子节点的高度扩展，在浮动元素之后清除浮动。我通常用来执行此操作的方法是Nicolas Gallagher's "Micro Clearfix Hack"（或其变体）。他设置了一个可以应用于浮动元素父级的类。像这样：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

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

在下面测试：

.HeaderWrap, .BodyWrap, .FooterWrap {
    float:left;
    width:100%;
    border:1px solid yellow;
    clear:both;
}
.Header, .Body, .Footer {
    width:960px;
    border: 1px solid green;
    margin:0 auto;
    clear:both;
}
.Header {
    height:227px;
    background:url("../Images/man-with-flag-1.png") no-repeat;
    #box-shadow: 0 0 20px 0 black;
    z-index:-1;
    clear:both;
}
.HeaderLogo {
    float:left;
    height:100px;
    width:150px;
    box-shadow: 10px 10px 5px #000000;
    background:url("../Images/visa.png") no-repeat;
    position:relative;
    right:-45px;
    bottom:-165px;
    border:5px solid white;
    z-index:999;
    clear:both;
}
.BodyWrap {
    border: 1px solid red;
}
.Body {
    position: relative;
    border: 1px solid green;
    min-height: 450px;
    clear:both;
}
.BodyLeft {
    float:left;
    height:900px;
    #min-height: 900px;
    border:1px solid yellow;
    position: relative;
    #top: -90px;
    z-index:-1;
    background:#b1b6bc;
    #box-shadow: 0 0 15px 0 black;
    width:26%;
    clear:both;
}



.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}

<div class="HeaderWrap">
    <div class="Header">
        <div class="HeaderLogo"></div>
    </div>
</div>
<div class="BodyWrap">
    <div class="Body clearfix">
        <div class="BodyLeft"></div>
        <div class="BodyRight"></div>
    </div>
</div>
<div class="FooterWrap">
    <div class="Footer">
        <div class="FooterPicture"></div>
        <div class="Footer1"></div>
        <div class="Footer2"></div>
        <div class="Fotter3"></div>
        <div class="Footer4"></div>
    </div>
</div>

Answer 2

检查此处的代码：JSFiddle。您可以将display: table-cell添加到.Body：

.Header, .Body, .Footer {
    width:960px; 
    border: 1px solid green; 
    margin:0 auto; 
    clear:both; 
    display: table-cell;
}:

display: table-cell;

但它不适用于IE7。

另外供您参考：How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

CSS DIVS和自动高度

2 个答案: