※2022年3月29日
display:gridが発明されたので、古い記事になりました。
新しい記事はこちら：【display:grid】フッターを常に最下部に
むかし書いたこちらの記事から月日が経ち、display:flex;が発明されたので、書き直します。
HTMLは、こう。
<body>
<header></header>
<main>
※ここにコンテンツ
</main>
<footer></footer>
</body>
CSSは、こう。
html,body{
min-height: 100vh;
}
body{
display: flex;
flex-direction: column;
}
header{
flex-grow: 0;
}
#content{
flex-grow: 1;
}
footer{
flex-grow: 0;
}すごくスッキリしました！
IEでもばっちりです！
2020年10月追記
※IEにはベンダープレフィックスをつけてね～！！
