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

Question

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

如果我可以创建相同的液体布局和 xbrowser 会很棒（是的......我知道）:)

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

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

谢谢！！！！

Answer 1

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

Answer 2

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

Answer 3

您可以尝试这样的解决方案：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;
}