Question

我一直在阅读有关具有float属性的元素如何不考虑其高度的问题。因此，我应该在父div的末尾之前使用clear:both，以便它将延伸到整个内部div。

您可以在This Page上看到ID为full-height-template-container的div没有超出其内部内容，因此页脚（右下角的版权文字）在页。

布局如下：

<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延伸到其子女身上？

提前致谢！

Answer 1

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

Answer 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>

Answer 3

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

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

也许你正在某个地方使用position: absolute，这会导致这个元素被提升出父母，并且会使父母不能伸展（只是在这里大声思考......）

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

Answer 4

在#full-height-template-container中你使用的是height: 100%，这意味着div占据了父级的100％高度。

如果我们在您的CSS中追溯每个父元素都会被分配height: 100%，包括html和body元素，这意味着高度取自窗口 - 所以结果div永远不会超过窗口的大小（但内容仍会溢出）。

因此，不是导致问题的浮点数，而是您明确指定给每个div的高度。

外部Div不会拉伸以适应内部div（使用清除）

4 个答案: