CSSで子要素の高さを親要素に合わせる方法3選

「横並びしている要素の高さがばらついているから親要素の高さに合わせたい！」

「高さを合わせた親要素内の子要素も同じ高さにしたい！」

CSSで子要素の高さを親要素に合わせる方法を3つ紹介します。

関連記事も参考にしてください。

【状況】子要素の高さを親要素に合わせたい

下記のようにfloatで横並べした場合、子要素はそれぞれの高さになります。

これの子要素の高さを親要素に合わせてみましょう。

<style>
.example{
    overflow: hidden;
    border: 1px solid #999;
    background: #cceefd;
}
.example>div{
    border: 1px solid #999;
    background: #ffb3b3;
    float: left;
}
</style>
<div class="example">
    <div>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

【方法1】親要素にdisplay:flex

親要素にdisplay:flexを指定すると子要素の高さを親要素の高さに合わせることができます。

<style>
.example2{
    /*コレ*/display: flex;
    border: 1px solid #999;
    background: #cceefd;
}
.example2>div{
    border: 1px solid #999;
    background: #ffb3b3;
}
</style>
<div class="example2">
    <div>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

display: flexは子要素の並びや位置を調整できるCSSです。

display: flexを指定するだけで横並びになるためfloatの指定が不要になります。

display: flexとセットで指定する「align-items」という子要素の縦の位置を調整できるCSSがあります。

align-items: normal（初期値）またはalign-items: stretchが指定されていると子要素は親要素と同じ高さになります。

この方法のいいところは親要素がheight:autoでも指定できることです。

【方法2】親にauto以外のheight、子にheight:100%

親要素にauto以外のheightを指定し、子要素にheight:100%を指定すると親要素の高さに合わせることができます。

<style>
.example3{
    /*コレ*/height: 200px;
    overflow: hidden;
    border: 1px solid #999;
    background: #cceefd;
}
.example3>div{
    /*コレ*/height: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #ffb3b3;
    float: left;
}
</style>
<div class="example3">
    <div>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
    <div>テキスト</div>
</div>

heightの%指定は、親のheightがautoだと効きません。

よって親にauto以外の数値付きの指定をする必要があります。

親の高さが決まっているときはこの方法でもいいのですが、内容量によって変化させたいときは使いづらい方法です。

また、heightを指定するときは「box-sizing: border-box」も合わせて指定しましょう。

これを指定するとpaddingやborderを指定してもはみ出ることがありません。

【方法3】position:absolute

子要素にposition: absolute; top: 0; bottom: 0;を指定すると親要素の高さに合わせることができます。

<style>
.example4{
    position: relative;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #999;
    background: #cceefd;
}
.example4>div{
    border: 1px solid #999;
    background: #ffb3b3;
    float: left;
}
.example5{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
}
</style>
<div class="example4">
    <div>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
    <div class="example5">テキスト</div>
</div>

position: absoluteは任意の位置に調整できるCSSです。

親要素に「position: relative」を指定し基準とします。

「position: absolute」を指定した子要素に「top: 0」と「bottom: 0」を指定すると親の高さまで広がります。

「position: absolute」のメリットは親要素にpaddingがあってもpaddingを含んだ最大の大きさになることです。また、height:autoでも効きます。

ただし、兄弟要素すべてに「position: absolute」を指定すると親要素の高さがなくなってしまい高さが確保できなくなり、結局heightを使わざるを得なくなります。

兄弟要素がimgなどの画像だと便利な方法です。

【まとめ】子要素の高さを親に合わせる方法

【オススメ】親要素にdisplay:flex

親要素にdisplay:flexとalign-items:normalまたはstretchを指定する。

【高さを指定できるなら】親にauto以外のheight、子にheight:100%

heightの%指定は、親のheightがautoだと効かない。

【画像の高さに合わせたいとき】position:absolute

子要素にposition:absoluteとtop:0とbottom:0、親要素にposition: relativeを指定する。

以上、CSSで子要素の高さを親に合わせる方法でした。