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

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

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


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。