「高さを合わせた親要素内の子要素も同じ高さにしたい!」CSSで子要素の高さを親要素に合わせる方法を3つ紹介します。関連記事も参考にしてください。親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。親要素を子要素の幅に合わせましょう。この記事を読む【CSS】height:100%やautoが効かない理由height:100%やautoにしても高さいっぱいにならないのなんで?高さが0になってるのなんで?height:100%やautoが効かなかったり、高さが0になる理由を解説します。display:flexで横並びの高さを揃える方法について解説します。高さを親要素に合わせたい下記のようにfloatで横並べした場合、子要素はそれぞれの高さになります。これの子要素の高さを親要素に合わせてみましょう。<div>テキスト</div></div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法1】親要素にdisplay:flex親要素にdisplay:flexを指定すると子要素の高さを親要素の高さに合わせることができます。flexは子要素の並びや位置を調整できるCSSです。flexを指定するだけで横並びになるためfloatの指定が不要になります。flexとセットで指定する「align-items」という子要素の縦の位置を調整できるCSSがあります。stretchが指定されていると子要素は親要素と同じ高さになります。この方法のいいところは親要素がheight:autoでも指定できることです。【方法2】親にauto以外のheight、子にheight:100%親要素にauto以外のheightを指定し、子要素にheight:100%を指定すると親要素の高さに合わせることができます。<div>テキスト</div></div>heightの%指定は、親のheightがautoだと効きません。よって親にauto以外の数値付きの指定をする必要があります。親の高さが決まっているときはこの方法でもいいのですが、内容量によって変化させたいときは使いづらい方法です。border-box」も合わせて指定しましょう。これを指定するとpaddingやborderを指定してもはみ出ることがありません。0;を指定すると親要素の高さに合わせることができます。absoluteは任意の位置に調整できるCSSです。relative」を指定し基準とします。0」を指定すると親の高さまで広がります。absolute」のメリットは親要素にpaddingがあってもpaddingを含んだ最大の大きさになることです。height:autoでも効きます。absolute」を指定すると親要素の高さがなくなってしまい高さが確保できなくなり、結局heightを使わざるを得なくなります。兄弟要素がimgなどの画像だと便利な方法です。【オススメ】親要素にdisplay:flex親要素にdisplay:flexとalign-items:normalまたはstretchを指定する。【高さを指定できるなら】親にauto以外のheight、子にheight:100%heightの%指定は、親のheightがautoだと効かない。relativeを指定する。以上、CSSで子要素の高さを親に合わせる方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。