ホームページ > 記事 > ウェブフロントエンド > PC側では、ページが全開かどうかに関係なく、フッターを下部に配置します（位置決めは必要ありません）

PC側では、ページが全開かどうかに関係なく、フッターを下部に配置します（位置決めは必要ありません）

青灯夜游転載: 2018-10-10 16:22:542835ブラウズ

最近プロジェクトを作成していましたが、一部のページが 1 画面を占めておらず、下部にあるフッターが外観に影響を与えていたため、オンラインで検索した結果が次のとおりです##。

#この問題を解決する最善の方法は、CSS3 によって提供される高度なレイアウトモデルであるフレックスボックスを使用することです。これにより、適応性のあるレイアウトを作成できます。

以下のコードを開始しましょう

<body>
		<p id="header">...</p>
		<p id="content">...</p>
		<p class="footer">...</p>
	</body>

html{
    height: 100%;
}

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

#header{
   /* 我们希望 header 采用固定的高度，只占用必须的空间 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

#content{
   /* 将 flex-grow 设置为1，该元素会占用全部可使用空间 
      而其他元素该属性值为0，因此不会得到多余的空间*/
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

#footer{
   /* 和 header 一样，footer 也采用固定高度*/
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

flex-deraction: columns を使用してページ構造を垂直方向に配置し (flex はデフォルトで水平方向に配置されます)、同時に高さを変更します。 html 要素と body 要素を 100% に設定すると、画面全体に表示されます。

flex に含まれる 3 つの属性は、上で使用されています。その使用方法を紹介します。

flex-grow: 同じコンテナ内の要素には、割り当て可能な領域があります。および拡大率
flex-shrink: スペースが不十分な場合の要素の収縮率
flex-basis: 拡大基準要素の値

は、ヘッダーとフッターが占有すべきスペースのみを占有し、残りのスペースはすべてメインコンテンツ領域に与えられることを意味します

わかりました, ここでは、ページに関係なく、コンテンツが大きくても小さくても、フッターが素直に下部に残るようにすることができます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオチュートリアル、 CSS3 ビデオチュートリアルをご覧ください。

PC側では、ページが全開かどうかに関係なく、フッターを下部に配置します（位置決めは必要ありません）

関連記事