BLOG

CSSでフッターの下に隙間ができないように調整する

| HTML / CSS

昨今4kモニターやらなんやらと解像度が大きくもなってきているし、ノートパソコンで作業をする人も増えております。
なのでブラウザの高さがまちまちです。

4kモニターでブラウザの高さを広げてみるとよく、フッターの下が空いたりして面倒ですよね。
でもやっぱりフッターはブラウザの下に来てほしいと、しかし、固定もだめなのでその調整方法をいくつかあると思うので少しだけメモ

<html>
<head></head>
<body>

<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>

HTMLはこんなかんじ。

ヘッダー・フッターの高さが固定されている場合

これが一番簡単でmainを全体の高さからheader/footerの高さを引いた値を最小の高さとして指定する。

header{
  height: 100px;
}

main{
  min-height: calc( 100vh - 200px);
}

footer{
  height: 100px;
}

ヘッダー・フッターの高さが固定ではない場合

flexを使う

.container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer{
  margin-top: auto;
}

gridを使う

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

いくつかの方法を書きましたがまだあるかな?
それぞれにあった方法を選んでお使いください。

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP