はじめに
「要素 最下部 固定」みたいに調べると、大体footerを画面最下部に固定する方法が出てくるが、それで実装すると以下のように親要素の幅にならないで飛び出す…という事に直面する。
(position: fixed;がうまくいかないのは要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されないため。)
fixed-bottom.css
.fixed-bottom {
width: 100%;
bottom: 0;
position: fixed;
}
これを解消するに躓いたので、
こうならないで画面最下部に位置するようにしつつ、親要素の幅に合わせる(width: 100%にする)方法を記録しておく。
解決方法
flexを用いる
sample.html
...
<body>
<header>
...
</header>
<main>
<div class="container">
<div class="chat">
<div class="chat-timeline">
<!-- postされたchatがtimeline形式で一覧表示されるコンポーネント -->
</div>
<div class="chat-post">
<!-- chatをpostするためのコンポーネント -->
</div>
</div>
</div>
</main>
</body>
...
sample.css
html, body {
height: 100%;
}
.container{
// headerの高さが固定と想定
height: calc(100% - 〇px);
}
.chat{
height: 100%;
display: flex;
flex-direction: column;
}
.chat-timeline{
flex: auto;
}
flex: auto; = flex: 1 1 auto;
width・heightをフレックスコンテナーの空き領域を埋めるために自動的に調整(伸長したり、コンテナーに合うように最小サイズまで収縮したり)させる構文。
今回だと以下の図のように四角の部分が空き領域なのでそこを埋めるように自動的に調整してくれ、「chatをpostするためのコンポーネント」が期待通り画面最下部に固定されているような状態にできる。
参考文献
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
https://developer.mozilla.org/ja/docs/Web/CSS/flex
↧