我在我网站的 .content div 上使用 html5 样板 clearfix。但是在两个页面上,.content div 的内容实际上比我给它的最小高度长,它们被砍掉了。但 clearfix 通常有助于修复由父 div 中的 float 元素引起的问题。但是我的 .cell div 没有 float 。
<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;
}
最佳答案
发生这种情况的原因是因为 .content
的高度是相对于父级的高度,而父级的高度又是相对于窗口的高度。
因此,子元素 .content
的高度永远不会超出此高度,因为它受到父元素的限制。删除以下内容:
.content {
height: 100%;
}
关于html - div 太短——clearfix 不起作用,但我的元素没有 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20231330/