1

我一直在阅读有关具有该float属性的元素如何不考虑其高度的信息。因此，我应该clear:both在父 div 结束之前使用它，这样它就会覆盖整个内部 div。

您可以在此页面上看到带有 id 的 divfull-height-template-container没有超出其内部内容，因此页脚（右下角的版权文本）在页面上的位置过高。

布局如下所示：

<div id="full-height-template-containter">
  <div id="content-container">
    <div id="full-width" style="float:left;"> 
    </div>
    <div style="clear:both;"></div>
  </div>
<div style="clear:both;"></div>
</div>

为了使外部 div 覆盖其子级，我还能尝试什么？

提前致谢！

4

4 回答 4

2

这是一个常见的问题。为了解决这个问题，发明了许多变种的clearfix hack。

于 2012-08-03T15:03:55.733 回答
2

在我将这个版本的“Clearfix”插入需要这样拉伸的容器顶部之前，我遇到了同样的问题：

CSS：

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML：

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

<span class="doc">
     <a href="../speakers/johnnixon.html" "class="spkrs1">John Nixon</a> 
     <a href="../speakers/pricereveil.html" "class="spkrs2">Henry Wright</a> 
</span>
于 2012-11-18T01:49:12.000 回答
1

我把你的样本放在小提琴上，并给它一些 CSS 来显示 div：http: //jsfiddle.net/WRzsE/

您可以清楚地看到它完美地工作，正如您所描述的那样。我怀疑你做错了什么......

也许您正在使用position: absolute某个地方，这会导致元素从其父级中取出，并使父级不会伸展（只是在这里大声思考......）

编辑： 我只是看了一下实际页面（忽略了链接）。你的 div 伸展得很好。问题在于页脚的定位，它设置为绝对。我怀疑你正在尝试实现一个粘性页脚，看看这个，就像一个魅力。我一直在使用它：http ://ryanfait.com/sticky-footer/

于 2012-08-03T15:11:09.437 回答
1

在#full-height-template-container您使用的情况height: 100%下，这意味着 div 占据父级的 100% 高度。

如果我们在您的 CSS 中追溯分配了每个父元素height: 100%，包括htmlandbody元素，这意味着高度取自窗口 - 因此 div 永远不会超过窗口的大小（但内容仍会溢出） .

因此，导致问题的不是浮动，而是您明确分配给每个 div 的高度。

于 2012-08-06T07:48:41.543 回答