将父div高度扩展为childs

Question

我的页脚定位有问题。它不会转到bottom/last。

所以，我有一个容器div ，其 3 div - float:right，float:left和中心一个（有position:absolute）在两个浮动的 div之间。

中心必须固定宽度和高度，因为它是图像。

在中心 div中，我有另一个带有内容的div。

问题是，因为中心div具有固定的宽度和高度，所以它不需要 childs div height 。

所以我的问题是如何将页脚放在最后（容器之后）？

注意 - 使用JQuery我将浮动divs 的宽度放在一起，因为它们采用 100％-980px 宽度。

This is how it looks like

我尝试加入中心div overflow:auto，overflow:overlay，margin-left:auto;margin-right:auto;。

Answer 1

为父母试试这个。 溢出：汽车;

另请参阅此堆栈溢出帖子：Expanding a parent <div> to the height of its children

Answer 2

再次阅读你的问题后，我再次得出结论，并使用你的代码创建下面的小提琴，并为你想要的大小嵌入一个样本图像。

在理解你的问题时，如果我错了，请告诉我。所以我可以根据你的需要来解决。

小提琴：http://jsfiddle.net/ah3nr/6

演示：http://jsfiddle.net/ah3nr/6/embedded/result/

我的方法：

我已从中心position:absolute移除了div，并为图片添加了new div，并使用 css图层技术将它们联系起来

更新了css：

.sectionDownContainer {
    width: 980px;
    /*height:270px;*/
    border:1px solid red;
    /*position: absolute;*/
    position:relative;
    top: -32px;
    z-index: 1;
}
/*.sectionDownMenu {
    margin-left: 50px;
    margin-top: 1px;
    display: block;
}
*/

#image_container {
    position:relative;
    width:980px;
    height: 270px;
    margin-top:-2px;
    z-index:2;
}

.sectionDownContent {
    width: 640px;
    margin-top: -190px;
    margin-left: 50px;
    position: relative;
    z-index:5;
    color:#000;
    font-weight:bold;
}

屏幕截图：

Answer 3

您需要设置 center-div 的此属性：height:auto（您还可以添加最小高度：min-height:400）

关于页脚的第二个问题，这要复杂得多。你必须这样做：

<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
    <div id="footer">
    </div>
</div>

我现在给你完整的CSS（因为它不是那么容易）：

.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height

此解决方案也符合Stackoverflow上的其他主题：Align DIV's to bottom or baseline，How to align content of a div to the bottom?

但是，如果您遇到问题，可以这样做（我的首选解决方案）：

<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
</div>
<div id="footer">
</div>

它的CSS：

.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...

请注意，以上所有解决方案仅在您将 all “contents”设置为float时才有效，但它不适用于绝对值！我在这里找到了这个：http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right

这是由于div的问题：不可能“告诉”父div的大小！因此，像“content_center”或“content_right”这样的孩子不会告诉“内容”他们有多长以及“内容”必须有多长。因此，如果您对孩子使用绝对值，则无法告诉页脚在哪里对齐。

所以你的第二个问题虽然看起来微不足道，但却是一个非常重要的问题，并不容易解决。

重要更新：

我现在尝试找到absolute的解决方案。问题是，absolute和fixed从常规（文本）流中取出，因此它们的大小不再影响任何其他元素的大小/位置。但我们还必须了解absolute元素仍然控制其所有子元素，因此我们应该将子元素设置为relative而不是父元素（此处为“content”）！所以我终于找到了解决方案，这很奇怪，因为它几乎与我上面提到的相反，但是这个解决方案受到其他人发布的影响，而以下解决方案是“我自己的”（我添加了一个标题用于演示目的） ）：

<div id="header">
</div>
<div id="content">
    <div id="content_left">
    </div>
    <div id="content_center">
    </div>
    <div id="content_right">
    </div>
    <div id="footer">
    </div>
</div>

CSS（“标题”清楚地显示，“内容”继承了对其子项的所有定位，如“content_left”，“content_right”，aso。）：

.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout

重要的一点是，您可以决定哪个子元素是最长的元素，并设置此元素的position:relative，而另一个元素可能有absolute或fixed。但是如果你不知道哪个元素最长，那么所有孩子的位置都需要设置为relative。无论如何，我建议将所有孩子设置为relative（如果需要，在fixed旁边），因为他们的父“内容”将正确设置他们的绝对高度位置，因此不需要任何{{1完全没有。

我正在重复自己：上面我写了它不可能告诉父div大小......实际上它是可能的，但是如果使用值absolute和absolute则不行。只有当您使用浏览器标准值（fixed）或static时，才会通知父div其子项的大小，因此页脚正确设置在页面底部。< / p>

好吧，我的解决方案无处不在......即使在IE中（测试6.0和8.0！），由于hack relative，其中值margin:0 0 60 0应该是60的正值。现在我们终于得到了非浮动的crossbrower解决方案。 ;）

Answer 4

您遇到的问题是某些CSS属性导致元素被“从流中删除”（请参阅​​W3C Visual formatting model）。父元素自然地增长以适合子元素的高度，然而，浮动和绝对定位的元素从文档流中移除。正如在一些注释中所提到的，在父元素上设置overflow: auto;或overflow: hidden;会重新建立浮动元素周围的边界框。这意味着您可以在父容器中浮动元素，然后在父元素上设置overflow: hidden;，并且父元素将包含浮点数。但是，这不适用于绝对定位的元素：the absolutely positioned box is "removed from the normal flow entirely (it has no impact on later siblings)"。唯一的例外是整个文档将尝试增长以显示任何定位元素（提供元素position: absolute; top: 3000em;，页面滚动条将增长以允许您滚动到该元素）。我不知道有什么办法可以为文档以外的元素触发这个。

回到预期效果...如果您不需要IE7支持，可以使用display: table; table-layout: fixed;来获得一个固定宽度和两列可变宽度的居中列。

<强> jsFiddle Demo

在不久的将来，使用CSS“flexbox”属性也可以实现。 Flexbox将允许一些nifty new features，包括水平和垂直居中，更改渲染元素的顺序，以及设置元素应该占剩余变量宽度的“flex”值。然而，该标准目前正在经历一段时间的变化，旧标准（享受适度支持）正在被新标准取代（几乎没有支持）。请参阅"Old" Flexbox and "New" Flexbox和accompanying demo。考虑到Web标准实施的进展非常缓慢，除非产生真正精通的polyfill，否则我不希望在几年内使用它。