Web ページのフッターを修正する最良の方法 (翻訳)_html/css

Web ページのフッターを修正する最良の方法 (翻訳)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:15

オリジナル

1314 人が閲覧しました

元のアドレス: http://tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/

Web レイアウトを開発するときに、次の問題に遭遇したことがあるかもしれません:

本文の最後の部分にフッターを設定することはできますが、ページが存在するときページ内のコンテンツが少ない場合、フッターは画面の中央に残り、その下には大きな空白領域が残ります。

この小さなチュートリアルでは、最新のテクニックを使用して、常にページの下部に固定されるフッターを作成します。

上記のような状況が起こらないように、CSS3 が提供するレスポンシブレイアウトを作成する方法である Flexbox を使用して Web ページを構築します。 Flexbox のモデルとそのプロパティに詳しくない方のために、記事の最後にリンクをいくつか残しておきます。

使用する例は非常に単純で、ヘッダー、メインセクション、フッターです。以下は HTML です。特別なことは何もありません。

<body>    <header>...</header>    <sectionclass="main-content">...</section>    <footer>...</footer></body>

ログイン後にコピー

Flex を使用するには、ボディの表示プロパティを flex に設定し、次に flex-direction を列 (デフォルトは水平) に設定し、 html と本文の高さ 100% では、画面全体に表示されます。

html{    height: 100%;} body{    display: flex;    flex-direction: column;    height: 100%;}

ログイン後にコピー

次に、次のフレックスプロパティを設定して、Web ページの各部分が占めるスペースを決定します。

flex-grow: コンテナー内の割り当て可能な領域を占める要素の比率。
flex-shrink: スペースが不十分な場合に要素が縮小する比率。
flex-basis: 要素のデフォルト値。

ヘッダーとフッターがスペースの固定部分を占め、残りのスペースがメインコンテンツに分割されるようにします。このようなレイアウト CSS は次のとおりです。

header{  /* We want the header to have a static height,   it will always take up just as much space as it needs.  */  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */  flex: 0 0 auto;} .main-content{  /* By setting flex-grow to 1, the main content will take up   all of the remaining space on the page.   The other elements have flex-grow: 0 and won't contest the free space. */  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */  flex: 1 0 auto;} footer{  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */  flex: 0 0 auto;}

ログイン後にコピー

下の画像をクリックしてデモページを表示し、ピンクのボタンをクリックすると、Web のコンテンツを変更できます。ページにアクセスすると、フッターが常に Web ページの下部にあることがわかります。