Flexboxでコンテンツ量が少ない時はフッターを画面下に固定する

Posted: 2016.11.28 / Category: HTML&CSS / Tag: CSS3
コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。
Sponsored Link

HTML
header,article,footer が並んでいて footer を固定したいとします。
HTML
<header> Header </header> <article> Article </article> <footer> Footer </footer>
CSS
「display: flex;」だけだと横並びですが「flex-direction: column;」を指定することで、縦並びのFlexレイアウトができます。
html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } header, footer { flex: 0 0 auto; } article { flex: 1 0 auto; }
これならフッターの高さも可変になるし使いやすいですね。