将100％宽度div定位在固定宽度浮动的底部

Question

我知道这种问题每天都会被问到，但我似乎没有找到解决这个问题的方法......

所以，这个想法非常简单，我想创建一个3列固定宽度布局，页眉和页脚宽度为100％。

除了页脚之外，一切似乎都有效。

以下是一个示例：http://jsfiddle.net/xMQLy/1/

所以基本上问题似乎是，因为主体+侧柱没有固定的高度，页脚没有位于它们的底部。

我该如何解决这个问题？

感谢

Answer 1

对absolute CSS属性使用fixed或position会从父级的上下文中删除一个元素。因此，父宽度/高度不会受此孩子的大小影响。 float属性也会产生此效果：使用position:absolute/fixed或float无法有效地设置样式。

我抛弃了这些属性并修改了您的代码：@ 小提琴：http://jsfiddle.net/xMQLy/5/

一些变化：

• 抛弃无用的CSS属性：
  .wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
• 将常见样式（.leftcol, .main, .rightcol）组合在一起。
• 更新了HTML源代码，在源代码中的每个div周围添加了<div class="wrapper-align">包装，并在这些包装器 ^[1]
之间添加了删除空格

^[1]
.leftcol, .main, .rightcol元素可以彼此相邻放置，在每个div上应用display:inline-block。但是，这些元素的默认对齐方式是底部。由于列必须位于顶部，因此必须使用vertical-align:top。此CSS属性只能在内联元素中使用。要在不混淆float或display:absolute/fixed的情况下实现此布局，必须在inline元素周围添加display-block包装。

必须删除空格，以防止在元素之间产生间隙。为了说明，请对这些网页进行比较：No whitespace与White space。