html - CSS - 保持页面高度

Question

我试图将页眉放在顶部，将页脚放在底部。如果容器变大，则应将页脚向下推。

我有以下使用 calc() 的工作代码，但所有浏览器都不支持它。所以，我需要替代方案。请注意，我只想要 CSS 解决方案。

代码:

header{
    height:50px;
    background:#CCC;
}
footer{
    height:30px;
    background:#333;
}
main{
    height:auto;
    min-height:calc(100% - 80px);
}

JsFiddle

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

只需将您的主要内容设置为 100% 的 min-height，负边距与您的页脚相同的高度，例如(摘自 http://ryanfait.com/sticky-footer/ )

* {
    margin: 0;
}
html, body {
    height: 100%;
    color:#FFF;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 155px;
}


<div class="wrapper">
    <header>Header</header>
    Main Content
    <div class="push"></div>
</div>
<footer>Footer</footer>

http://jsfiddle.net/u6rsLv1j/2/