Jump to the content

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

CSS

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

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×