WEBページで、常時固定のフッターを実装したいが、上手くいかない

Question

#常時固定のフッターを作成したい
アプリ等でよく見る、常時固定のフッターです。ボトムナビゲーションを表示させます。

構造は簡単に、<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;を使っているのですか？

そこらへんの事情などもご存じの方がいましたら、教えて頂きたいです。
よろしくお願いします。

Comments

[退会済みユーザー]

position と display は用途が全く違うものだからそれだけで同じ設定ぽくすることは不可能ですよ

[yoshinavi]

アプリの場合が一般的かどうかは知識不足で定かではありませんが、CSSで言えば「fixedで固定」が一般的だと思います。

[cheche0830]

flexを使う理由がないですね。fixedでやるのが普通だと思います。DRYというのもよくわかりません・・・

Answer 1

うーん、fixedしかないのかぁ

Comments

[yoshinavi]

質問者さんのDRYの意味が何となく分かりましたが、囲う要素の位置・高さでは無く、中のコンテンツ自体が各デバイスの表示領域に合わせた高さに変動しない以上は、やっぱりfixedでしょうね。

自身で言ってらっしゃる「スクロール（対処も含めて）」「flex対応（GridSystem等も含めて）」もコンテンツ部分では無く、囲う要素を強制的に確保するだけなのでDRYではないような気がします。結局はfixedが無難でDRYなのでは？
･･･DRYの使い方が間違っているかもです(^^;)

[dwayne_johnson]

“DRY”でいろんな人を惑わせたようで。。
“DRY”は何となく覚えたてだったので使いたかったんです笑
すんません

何となく、無理にpaddingを確保して、そこにfixedで要素を重ねるって方法に違和感を感じていて（paddingは余白であって、何かを乗せるためのスペース確保ではないような気が）、誰かご存知ないかと質問した次第なのですが、やはりなさそうですね。

とりあえずfixedで実装は変えずに、何か良い方法見つけたらここに書きます

[yoshinavi]

＞無理にmarginを確保して、そこにfixedで要素を重ねる

margin設定でなく、その部分にスペース確保用「空のdiv」等でも良いとは思いますが、一般的には不要なコードを書かないためにmarginでスペースを確保していると思います。

個人的な考えですが、marginは外側の「余白」と言うよりは他要素との「間隔」であり、paddingが「余白」と考えるようにしています。

-追記-
あれ？ marginとpaddingを見間違えていたようで、お恥ずかしい･･･
(>_<;)