IE11ではまったので備忘録
＜結論＞
flex: 1 0 auto; を指定しろ。
＜本文＞
flexを使ってsticky footerを作るには以下のようにする
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
＜結論＞
flex: 1 0 auto; を指定しろ。
＜本文＞
flexを使ってsticky footerを作るには以下のようにする
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
でもこれだとmain部分が伸びず、footerがmainの上に来てしまう。
原因はflex-basisを指定していないかららしい。
flexプロパティは以下の構成
flex: flex-grow flex-shrink flex-basis;
本来省略できるはずなんだけど、だめみたい。
なので、以下のように指定してあげる。
main {
flex: 1 0 auto;
}
と指定することで解決
コード系を表示するやつどっかにあるのかな…
マークダウンとかなんかできないかそのうち探してみるかー
コメント
コメントを投稿