CSS:在底部设置动态高度标题和内容区域的最佳方式

Question

我在下面有一个 header#masthead 和一个 section#main。页眉的高度各不相同，但我希望网站的 #main 区域始终将窗口的其余部分填充到底部。我还想为 #main 区域指定一个最小高度。

纯 css 有可能吗？

或者最好的方法是什么？

亲切的问候，sepp88

Answer 1

你需要一种 sticky footer !

Demo JSFiddle

HTML

<div id="masthead">
    <p>dynamic height</p>
    <div class="push"></div>
</div>
<div id="main">
    <p>reach the bottom</p>
</div>

CSS

/* css reset */
* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#masthead {
    min-height: 100%;
    height: auto !important; /* min-height hack */
    height: 100%;
    margin: 0 auto -21em; /* size of main */
    background: red;
    color: white;
}

#main, .push {
    height: 21em; /* size of main */
}

/* such design */
#main {
    background: blue;
    color: white;
}

您可以找到有关 min-height hack 的更多信息 here .