垂直布局（标题-菜单-内容-底部）答案

【问题标题】：vertical layout ( header - menu - content - bottom )垂直布局（标题-菜单-内容-底部）
【发布时间】：2011-02-11 21:18:31
【问题描述】：

我正在将 Flex 更改为 HTML / CSS / Javascript，但我在途中遇到了一些困难。

如果我能创建相同的流式布局和 xbrowser 那就太好了（是的...我知道）:)

我跟着下一个教程：http://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html

但唯一的事情就是要杀死我，页脚。我可以将其堆叠到底部使内容 100% 吗？

谢谢！！！！

【问题讨论】：

把页脚粘在底部是一件很痛苦的事情

标签： html css layout liquid

【解决方案1】：

您可以尝试这样的解决方案：http://jsfiddle.net/steweb/wfmGN/

我在很多网站上都使用了这个技巧，我很满意 :D

标记：

<div id="wrapper">
    <div id="footer">I'm da foota</div>
</div>

css:

body, html{
    height:100%;
    padding:0;
    margin:0;
}
#wrapper{
    min-height:100%;
    position:relative;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100px;
    background:#DEDEDE;
}

【讨论】：

但在调整窗口大小时使用position:absolute 和bottom:0，页脚将与内容重叠
为什么不在页脚上设置一个固定的高度，并且包装器上的 padding-bottom 等于页脚高度？ :)

【解决方案2】：

您可以使用可在此处找到的粘性页脚方法http://www.cssstickyfooter.com/

【讨论】：

好的，不错的解决方案。但不确定，因为滚动条有一种奇怪的行为，不断增加大小
@Xavi 需要你当前代码的一个活生生的例子来帮助你更多:)

【解决方案3】：

由于 CSS 的怪癖，很难让页脚上方的内容达到您期望的 100%。大多数浏览器会将其呈现为 100% 的窗口高度，而不是页眉和页脚之间的剩余空间。而且由于该高度可能相差很大，因此您不能在其上使用包罗万象。

【讨论】：