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

    ×