Question

浮动元素（两个标题部分，一个容器和一个页脚），我试图将页脚放在容器下面。容器内的所有东西都浮动并溢出，所以容器本身的高度为零，页脚显示在我的一些内容下面，就像这样（它是下面的红色条）：

enter image description here

如何使容器与其包含的内容具有相同的高度，而不会使其固定高度或浮动容器？

这是index.html的主体：

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container">
        <div id="featureBar">
            <div class="feature"></div>
            <div class="feature"></div>
            <div class="feature last"></div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

这是样式表：

/**
* ========== HEADER ==========
*/

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}

.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}

/**
* ========== HOME PAGE ==========
*/

#featureBar {
    margin-top: 50px;
}

.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}

.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

/**
* ========== FOOTER ==========
*/

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}

Answer 1

如果我理解正确，你需要做的就是解决容器结束之前浮动的问题。

1。您只需在容器结束前应用清算div。

<div style="clear:both;"></div>

2。我的个人偏好是创建一个清算类：（在样式表的最后，以最大限度地提高特异性）。

.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

然后简单地将此类应用于任何浮动元素的包含div。结果是包含div将在它关闭之前清除浮动。

所以对你上面的代码。

<强> HTML

<body>
    <div class="headerBar">

    </div>
    <div class="tabArea">

    </div>
    <div class="container CF">Container
        <div id="featureBar">
            <div class="feature">Feature 1</div>
            <div class="feature">Feature 2</div>
            <div class="feature last">Feature 3</div>
        </div>
        <div class="contentBox" id="medHeight">
            ef
        </div>
        <div class="contentBox" id="largeHeight">
            ef
        </div>
    </div>
    <footer>
            footer
    </footer>
</body>

<强> CSS

.headerBar {
    margin: 30px -10px 0 -10px;
    height: 100px;
    background: black;
}    
.tabArea {
    margin: 0 -10px 0 -10px;
    height: 100px;
    background: red;
}  
#featureBar {
    margin-top: 50px;
}    
.feature {
    width: 310px;
    height: 265px;
    margin-right: 10px;
    background: green;
    float: left;
}    
.contentBox {
    margin-top: 60px;
    width: 100%;
    background: purple;
    float: left;
}

#medHeight {height: 270px;}
#largeHeight {height: 540px;}

.last{margin-right: 0;}

footer {
    margin: 60px -10px 0 -10px;
    height: 120px;
    background: red;
}
.CF:before,.CF:after{content:"";display:table;}
.CF:after{clear:both;}

DEMO HERE

http://jsfiddle.net/s87uP/4/

Answer 2

添加到你的CSS ..

.container{
  height: auto;
  margin: 5px; // optional
}

CSS使浮动元素的非浮动容器高度在里面

2 个答案: