高さ100%のヘッダー+2カラム

説明

サイトの大枠をレイアウトする際に頻出するパターンです。

ウェブアプリケーションでもありがちな、ヘッダー、サイドメニューなどの左カラム、メインコンテンツ用の右カラムがあり、高さが画面いっぱいになります。

HTMLの記述も少なく、メディアクエリによるレイアウトの変更も簡単です。

HTML

<main>
  <header>Header</header>
  <nav>Nav</nav>
  <article>Contents</article>
</main>

このHTMLへ修正リクエストをする

CSS

/* 高さを100%にする */
html, body {
  height: 100%;
}
body {
  margin: 0;
}

/* レイアウト指定 */
main {
  display: grid;
  grid-template:
    "head head" auto
    "nav  contents" 1fr
    / minmax(auto, 300px) minmax(300px, 1fr)
  ;
  gap: 20px;
  width: 100%;
  height: 100%;
}
main > header {
  grid-area: head;
}
main > nav {
  grid-area: nav;
}
main > article {
  grid-area: contents;
}

/* 装飾 */
main > header,
main > nav,
main > article {
  padding: 10px;
  background-color: #ccc;
  border-radius: 10px;
  text-align: center;
}

このCSSへ修正リクエストをする