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的更多信息。

Answer 2

确保body和html高度为100％。

body, html {
    height:100%;
}

masthead {
    Width:100%;
    height:40px;
}

main {
    height:100%;
    width:100%;
    margin-top:-40px;
}