Webサイトコーディングのあれこれ: CSSのFlexboxを使ってメインコンテンツとサイドバーの高さの合わせ方

今回はCSSのFlexboxを使ってメインコンテンツとサイドバーの高さを合わせてみましょう。

ブラウザサイズが800px以下の場合はサイドバーがコンテンツの下に落ちるように調整もしてみましょう。

まずはコンテンツとサイドバーの高さを合わせて横並びにしてみましょう。

【1】HTMLとCSSファイルを用意します

※用意したCSSファイルへのパスはご自分の環境に合わせて変更してください。

(HTMLソース)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/flexbox_sidebar.css">
<title>CSSだけを使ってサイドバーとコンテンツの高さを合わせる</title>
</head>

<body>

<section id="page">

<div id="main">

<h1>CSSだけを使ってサイドバーとコンテンツの高さを合わせる。</h1>

<p>サイドバーとコンテンツは、たとえどちらの内容が多くても、いつも等しい高さを保っています。</p>

<p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>

<p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>

<div class="wireframe-box">イメージ入れたり入れなかったり</div>

</div>

<aside>
<div class="wireframe-box double">バナーとか</div>
<div class="wireframe-box double">バナーとか</div>
<div class="wireframe-box double">バナーとか</div>
<div class="wireframe-box">バナーとか</div>
<div class="wireframe-box">バナーとか</div>
<div class="wireframe-box">バナーとか</div>
</aside>

</section>

</body>
</html>

【2】CSSもしくはSASSを記述していきます。

(1) まずはCSSのリセットとページ全体のスタイルを指定します。

※下記CSSはgulpでSassからCSSへ変換したソースです。
詳しくはこちらを参照ください。gulpのインストール方法や使い方を紹介しています。

@charset "UTF-8";
/*------------------------------------
    簡単なリセットとページのスタイル
-------------------------------------*/
* {
margin: 0;
padding: 0;
}

html {
background-color: #f3f3f3;
}

body {
font: normal 14px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
}

(2) 続いてコンテンツエリアとサイドバーエリアを水平にレイアウトします。

/*------------------------------------
    コンテンツとサイドバーを2カラムにするスタイル
-------------------------------------*/
#page {
/* 子要素を水平にレイアウトするための指定 */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* コンテンツとサイドバーを合わせたマックスの幅を1200pxにして中央に配置*/
max-width: 1200px;
margin: 0 auto;
}

#main {
/* メインコンテンツの幅を自動で指定 */
-webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

aside {
/* サイドバーの幅を280px以下にならないように指定 */
-ms-flex-negative: 0;
      flex-shrink: 0;
width: 280px;
}

(3) コンテンツエリアとサイドバーエリアのレイアウトを調整します。

/*------------------------------------
    コンテンツとサイドバーのスタイル
-------------------------------------*/
#main {
background: #fff;
padding: 40px 100px 40px 40px;
line-height: 1.5;
color: #565a5c;
}

#main h1 {
margin-bottom: 28px;
font-size: 24px;
}

#main p {
margin-bottom: 24px;
}

#main .wireframe-box {
background: #e2e2e2;
padding: 200px 0;
text-align: center;
margin-bottom: 24px;
}

aside {
background: #292c2f;
color: #fff;
padding: 20px;
text-align: center;
}

aside .wireframe-box {
background: #37393c;
margin-top: 20px;
padding: 50px;
}

aside .double {
padding: 100px;
}

これで上記画像のようにレイアウトできたかと思います。

続いてブラウザの幅を縮めた時、サイドバーをコンテンツの下に落として表示させます。

続けて下記CSSソースを記述してください。

@media all and (max-width: 800px) {
/* ブラウザ幅が800px以下の場合はサイドバーをコンテンツの下に落とす */
#page {
    /* 子要素を上から下へ垂直に表示する指定 */
    -ms-flex-flow: column;
        flex-flow: column;
}
aside {
    /* サイドバーをブラウザ幅に合わせる指定 */
    width: auto;
}
#main {
    padding-right: 40px;
}
}

これでブラウザの幅を800px以下に縮めた時は上記画像のようにサイドバーがコンテンツの下に落ちて、ブラウザの幅に合わせて伸縮するようになりました。

サンプルのhtmlとcssをGitHubにUPしておきましたので、
もし必要であれば確認してみてください。

下記にSassで記述した場合のコードも記載しておきますね。

/*------------------------------------
   簡単なリセットとページのスタイル
-------------------------------------*/

* {
   margin:0;
   padding:0;
}

html{
   background-color:#f3f3f3;
}

body{
   font:normal 14px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
}

/*------------------------------------
   コンテンツとサイドバーを2カラムにするスタイル
-------------------------------------*/

#page {
   /* 子要素を水平にレイアウトするための指定 */
   display:-webkit-flex;
   display:flex;

   /* コンテンツとサイドバーを合わせたマックスの幅を1200pxにして中央に配置*/
   max-width:1200px;
   margin:0 auto;
}

#main {
   /* メインコンテンツの幅を自動で指定 */
   -webkit-flex-grow:1;
   flex-grow:1;
}

aside {
   /* サイドバーの幅を280px以下にならないように指定 */
   -webkit-flex-shrink:0;
   flex-shrink:0;
   width:280px;
}

/*------------------------------------
   コンテンツとサイドバーのスタイル
-------------------------------------*/

#main {
   background:#fff;
   padding:40px 100px 40px 40px;
   line-height:1.5;
   color:#565a5c;
   h1 {
       margin-bottom:28px;
       font-size:24px;
   }
   p {
       margin-bottom:24px;
   }
   .wireframe-box {
       background:#e2e2e2;
       padding:200px 0;
       text-align:center;
       margin-bottom:24px;
   }
}

aside {
   background:#292c2f;
   color:#fff;
   padding:20px;
   text-align:center;
   .wireframe-box {
       background:#37393c;
       margin-top:20px;
       padding:50px;
   }
   .double {
       padding:100px;
   }
}

@media all and (max-width:800px) {

   /* ブラウザ幅が800px以下の場合はサイドバーをコンテンツの下に落とす */

   #page {
       /* 子要素を上から下へ垂直に表示する指定 */
       -webkit-flex-flow:column;
       flex-flow:column;
   }

   aside {
       /* サイドバーをブラウザ幅に合わせる指定 */
       width:auto;
   }

   #main {
       padding-right:40px;
   }
}

下記サイトを参考にさせていただきました。

Here Is The Easiest Way To Create Equal Height Sidebars