将父级div的高度扩展到childs
我对页脚的定位有问题。它不属于bottom/last。
所以，我有一个容器div，它有3 divs - float:right，float:left和center one (有position:absolute)，它位于两个浮动div之间。
one必须有固定宽度和高度的，因为它是图像。
在center div中，我有另一个包含大量内容的div。
问题是，因为中心div有固定的宽度和高度，所以它不采用childs高度。
因此，我的问题是如何将页脚放在最后(在容器之后)？
Note --使用JQuery，我将浮动的div的宽度放入其中，因为它们采用100%-980 put 宽度。
这就是它的样子。
我试着把中心的div overflow:auto，overflow:overlay，margin-left:auto;margin-right:auto;。
回答 4
Stack Overflow用户
发布于 2013-02-09 11:43:49
在再次阅读您的问题之后，我得出结论，使用您的代码创建下面的小提琴，并为您嵌入一个所需大小的示例图像。
请在理解你的问题时让我知道我是否错了。这样我就可以根据你的需要来工作了。
小提琴：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;
}截图：
Stack Overflow用户
发布于 2013-02-06 23:21:16
给父母试试这个。溢出:自动；
还请参阅此堆栈溢出帖子：达到它的孩子的高度
Stack Overflow用户
发布于 2013-02-09 16:42:34
您需要设置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此解决方案还根据堆栈溢出上的其他线程：将DIV与底部或基线对齐、如何将div的内容与底部对齐？
但是，如果您遇到了问题，您可以这样做(我的首选解决方案)：
<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...请注意，只有当您将所有“内容”设置为浮动时，所有上述解决方案才能工作，它不适用于绝对值！我在这里发现了这个：正确的
这是由于div的一个问题:不可能“告诉”父div的大小！因此，像"content_center“或"content_right”这样的孩子不会告诉“内容”的长度和“内容”的长度。因此，如果您为childs使用绝对值，就不可能告诉页脚在哪里对齐。
所以你的第二个问题，虽然看起来很琐碎，却是一个很重要的问题，而且不容易解决。
重要更新：
我现在试着用absolute找到一个解决方案。问题是，absolute和fixed是从常规(文本)流中提取出来的，因此它们的大小不再影响任何其他元素的大小/位置。但是我们也必须明白，absolute元素仍然控制着它的所有子元素，所以我们应该将childs设置为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 ( "header“清楚地显示，"content”继承到其子类的所有位置，如"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 )，因为他们的父“内容”将正确地设置他们的绝对高度位置，所以根本不需要任何absolute。
我重复自己:上面我写过，不可能告诉父div size...actually是可能的，但是如果使用了absolute和fixed值，就不可能了。只有在使用browser standart值(static)或relative时，才会通知父div其子程序的大小，因此页脚在页面底部被正确设置。
我的解决方案在IE中使用everywhere...even (测试了6.0和8.0!)由于黑客margin:0 0 60 0的存在，60值应该是bottom:-60的正值。现在我们终于找到了非浮动的交叉浏览器解决方案。;)
https://stackoverflow.com/questions/14740716
复制相似问题
腾讯云开发者
