フッターをそれが属する場所に保つ方法は?

この投稿は韓国語でも利用できます

フッターはページの最後の要素です。少なくとも、ビューポートの下部にあり、ページのコンテンツがビューポートよりも高い場合は低くなります。簡単ですよね??

フッターを含む動的コンテンツを操作する場合、ページ上のコンテンツがページを埋めるのに十分でないという問題が発生することがあります。フッターは、ページの下部にとどまるのではなく、上昇してその下に空白スペースを残します。

すばやく修正するには、フッターをページの下部に絶対に配置できます。しかし、これには独自の欠点があります。コンテンツがビューポートよりも大きくなると、必要かどうかに関係なく、フッターはビューポートの下部に「スタック」したままになります。

これは、私たちが望んでいない、または望んでいない動作を示しています。

これを達成するためのアプローチを見てみましょう。

フッターを制御する

index.html

main.css

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

それで、これは何をしているのですか?

  • page-containerページ上のすべての周りに行くと、ビューポートの高さの100%までの最小の高さを設定します(vh)。そのままrelative、その子要素はabsolute後でそれに基づいて位置を設定できます。
  • content-wrapは、フッターの高さである下部のパディングがあり、両方が入っているコンテナー内のフッターに正確に十分なスペースが残されていることを確認します。divここでは、他のすべてのページコンテンツを含むラッピングが使用されます。
  • footer設定されているabsoluteにこだわり、bottom: 0page-containerそれは内にあります。これはabsoluteビューポートではないため重要page-containerですが、ビューポートよりも高い場合は下に移動します。前述のように、2.5remここで任意に設定された高さは、content-wrap上記で使用されます。

そして、あなたはそれを持っています。あなたのフッターはあなたが期待する場所にとどまります!

最後の仕上げ

もちろん、これはCSSであるため、モバイル固有のUXに関する考慮事項と、min-height: 100%ではなくを使用した代替アプローチがなければ完成しません100vh。しかし、これには独自の欠点があります。

Flexbox(flex-grow付き)またはGridも使用でき、どちらも非常に強力です。

どの方法を選択するかは完全にあなた次第であり、あなたのデザインの詳細です。うまくいけば、上記の例とリンクが、意思決定と実装にかかる時間を節約するのに役立ちます。

読んでくれてありがとう。これが私が最近書いた他のいくつかのことです:

  • AmazonのElasticContainerServiceの初心者向けガイド
  • JestとEnzymeを使用したReactのテスト