#常時固定のフッターを作成したい
アプリ等でよく見る、常時固定のフッターです。ボトムナビゲーションを表示させます。
構造は簡単に、<div class="contents">
と<footer>
があるものとします。
##フッターを下部に固定する方法としては2つあると考えています。
-
footerを
position: fixed;
で位置指定し、contents下部にmarginなりpaddingで余白を確保 -
display:flex;
を使って、contentsをflex:1 1 0;
、footerをflex:0 0 4rem;
などとすることで、contents領域を可変に、footer領域を固定にする。(もちろんflex-direction: column;
を指定する
ですが、position: fixed;
によるアプローチは使いたくありません。できる限りDRYにしておきたいです。
そのため、flexレイアウトによる手法をとろうと考えたのですが...
#contents領域が画面のサイズに収まらない場合、footerが画面から消える
つまりcontentsのflex-shrinkが効いていない?のだと思います。
求めている挙動としては、
- footerは4remで常時固定され、contents部分は4remを引いた残りがheightとして割り当てられる
- 残りのheightよりcontentsの中身のheightが大きい場合は、フッターは表示されたままコンテンツ部分のみスクロールできるようにする
です。
overflow: scroll;
を使えば解決するのですが、スクロールバーの表示は大変いやなので、使いたくないです。親要素をゴニョゴニョしてスクロールバーを隠す方法の存在は知っていますが、それもまたDRYでなく、壁がいつか出てくると思うので避けたい。
どうにかflexを使いながら常時フッターを固定する方法はないのでしょうか?
それとも、一般的な常時固定フッターは全てposition: fixed;
を使っているのですか?
そこらへんの事情などもご存じの方がいましたら、教えて頂きたいです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー