メインコンテンツ </div> <footer> フッター </footer> </body> </html> css html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .maincontent{ flex: 1; ...">

ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

フッターを最下部に置く最小CSS felx

基本構造はbodyの中の子はメインコンテンツ用とフッター用2つを並列に。

html

<html>
<body>
    <div class="maincontent">
        メインコンテンツ
    </div>
    <footer>
        フッター
    </footer>
</body>
</html>

css

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.maincontent{
    flex: 1;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る

カテゴリー

広告

最近の記事

便利ツール