1

我的页脚定位有问题。它不去bottom/last。

所以，我有一个容器 div，它有3 个 div - float:right，float:left中间一个（有）位于两个浮动div 之间。position:absolute

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

在那个中心div 中，我有另一个包含很多内容的 div 。

问题是，因为中心 div 有固定的 width 和 height，它不占用孩子的 div height。

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

注意- 使用 JQuery，我放置了浮动 div的宽度，因为它们占用100%-980px 的宽度。

这就是它的样子。

我试着把div overflow:auto , overflow:overlay, margin-left:auto;margin-right:auto;.

4

4 回答 4

2

给家长试试这个。溢出：自动；

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

于 2013-02-06T23:21:16.367 回答
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;
}

截屏：在此处输入图像描述

于 2013-02-09T11:43:49.887 回答
2

你需要设置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 上的其他线程：将 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...

请注意，所有上述解决方案仅在您将所有“内容”设置为浮动时才有效，它不适用于绝对值！我在这里找到了这个：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为父元素（这里：“内容”）！所以我终于找到了解决方案，这很奇怪，因为这几乎与我上面建议的相反，但是该解决方案受到其他人发布的影响，而以下解决方案是“我自己的”解决方案（我添加了一个标题用于演示目的):

<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”等）：

.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 的大小......实际上它是可能的，但如果使用值absolute和fixed则不是。只有当您使用浏览器标准值 ( static) 或relative时，父 div 才会被告知其子 div 的大小，因此页脚在页面底部被正确设置。

好吧，我的解决方案在任何地方都有效……即使在 IE（测试 6.0 和 8.0！）中，由于 hackmargin:0 0 60 0的值60应该是bottom:-60. 现在我们终于得到了非浮动跨浏览器解决方案。;)

于 2013-02-09T16:42:34.933 回答
1

您遇到的问题是某些 CSS 属性会导致元素“从文档流中移除”（请参阅​​ W3C 视觉格式化模型）。父元素自然增长以适应子元素的高度，然而，浮动和绝对定位的元素会从文档流中移除。正如一些评论中提到的，在父元素上设置overflow: auto;或overflow: hidden;重新建立浮动元素周围的边界框。这意味着您可以在父容器中浮动元素，然后overflow: hidden;在父元素上设置，父元素将包含浮动。但是，这不适用于绝对定位的元素：绝对定位的框是 ". 唯一的例外是整个文档将尝试增长以显示任何已定位的元素（给定一个元素position: absolute; top: 3000em;，页面滚动条将增长以允许您滚动到该元素）。我不知道有什么方法可以为文档以外的元素触发此操作。

回到你想要的效果……如果你不需要IE7的支持，你可以用它display: table; table-layout: fixed;来实现一个固定宽度的居中列和两边可变宽度的两列。

jsFiddle 演示

在不久的将来，这也可以使用 CSS“flexbox”属性。Flexbox 将允许一些漂亮的新功能，包括水平和垂直居中，更改渲染元素的顺序，以及设置“flex”值来确定元素应该占用多少剩余可变宽度。然而，该标准目前正在经历一段变动期，旧标准（获得适度支持）正在被新标准（几乎没有支持）所取代。请参阅“旧”Flexbox 和“新”Flexbox以及随附的演示。考虑到网络标准实施进展缓慢，我不

于 2013-02-09T19:16:57.283 回答