【CSS】height:100%のページをコンテンツに応じて伸びるようにする

min-heightは100%でページ内容が100%を超えたら縦に伸びるというマークアップ。
アプリ風のSPサイトとかでよくやります。

<div class="page">
  <div class="page-content">
    <p>content</p>
  </div>
</div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page {
  position: relative;
  height: auto;
  min-height: 100%;
  background-color: #ccc;
}

min-height: 100%の場合

See the Pen jELVNO by Youhei Isoakwa (@yuhiisk) on CodePen.

http://codepen.io/yuhiisk/pen/jELVNO

100%以上コンテンツがある場合

See the Pen emEBYd by Youhei Isoakwa (@yuhiisk) on CodePen.

http://codepen.io/yuhiisk/pen/emEBYd

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.