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

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

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

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

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

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

CATEGORY

POPULAR POSTS

PAGE TOP