Question

我在我网站上的.content div上使用html5样板clearfix。但在两页上，.content div的内容实际上比我给它的最小高度要长，它们会被切断。但clearfix通常有助于解决父div中浮动元素引起的问题。但是我的.cell div没有浮动。

<div class="content clearfix">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    //etc
</div>




//css
.clearfix:before, .clearfix:after {    
 content: " "; /* 1 */
display: table; /* 2 */
}

.cleafix:after {
    clear: both;
}
.cell {
box-shadow: 5px 3px 5px #ccc;
display: inline-block;
font-size: 1.25em;
margin: 15px 10px;
min-height: 250px;
vertical-align: top;
width: 365px;
}

.content {
border-left: 1px dotted #eee;
float: right;
height: 100%;
margin-bottom: 100px;
margin-left: 10px;
overflow: visible;
padding-left: 15px;
text-align: center;
width: 779px;
}

Answer 1

发生这种情况的原因是因为.content的高度相对于父亲的身高而言相对于窗户的高度而言。

因此，子元素.content的高度永远不会超过此值，因为它受父元素的约束。删除以下内容：

.content {
    height: 100%;
}

Answer 2

我在新的html文件和高度中测试了它：100％不是问题。可能是你要浮动你的单元格，只需添加float：left;在细胞类中。

div太短 - clearfix不起作用，但我的元素没有浮动

2 个答案: