CSS

2017/05/08

CSSでheightを100%にしたのにまったく高さが変化しなくて困ってしまうことってありませんか？

特にボックスを横にfloatで並べた時など同じ高さにしたくてもならないことがあります。

親要素の高さに合わせます。

parentという親のボックスにchildという子供のボックスを2つfloatで横に並べています。

HTMLの一部

<div class="parent">
<div class="child">
<p><code>このボックスは1行</code></p>
</div>

<div class="child">
<p><code>このボックスは1行</code></p>
<p><code>このボックスは2行</code></p>
<p><code>このボックスは3行</code></p>
</div>

CSSの一部

.parent{
	border:solid 1px #ff0000;
	width:600px;
}
.child{
	background-color:#66cc33;
	width:300px;
	float:left;
	height:100%;
}
		

親要素（赤枠）には高さが設定されていません。全体（子供の要素の周り）が赤枠で囲まれてもいません

parentにとっての子供の要素childはfloatしているので高さがわかりません。これはfloatの決め事です。そして、parentには高さが設定されていませんのそれぞれheightが100％に設定していますが、親要素に高さがないので自分の要素の高さしか確保できていません。

親要素に高さを設定する

親要素の高さを基準にheight100%であるなら親要素に高さを設定してやれば解決です。parentに高さ180pxを設定します。

CSSの一部

.parent{
	border:solid 1px #ff0000;
	width:600px;
	height:180px;
}
		

親要素（赤枠）には高さを設定しましたので自分自身のボックスの高さが確定し、ボックスの周りにボーダーが表示されました。さらに子供であるchildも親要素の高さの100%の高さが確保され塗りつぶされました。

これで解決です。と行きたいところですがうまくいかない場合もあります。子供の要素であるchildがfloatしていますので親要素自体は高さがなかった状態からheightを設定しました。ならばということで高さを設定すると子供の要素のheight:100%が生きてきました。

しかしながら子要素の内容が増えた場合も親要素の高さは180px固定ですので高さが親要素の高さに固定されてしまいます。

文字がはみ出してしまっています。

後続の要素ともうまくいっていないようですね。

やっぱり親要素の高さを設定しない。

親要素の高さがピクセル指定の決め打ちだったのでうまくいきませんでしたので高さを自動にしてみます。

CSSの一部

.parent{
	border:solid 1px #ff0000;
	width:600px;
	height:auto;
}
		

親要素にheight:autoを設定すると残念ながら1行の方のボックスは短くなってしまいました。これは親要素の高さがautoなのでautoに対して100%の高さになってしまいました。親要素も高さがなくなってしまいました。

結局ごまかす？

親要素の高さを確保します。親要素を子要素と同じ背景色にしてごまかします。

CSSの一部

.parent{
	border:solid 1px #ff0000;
	width:600px;
	overflow:hidden;
	background-color:#66cc33;
}
		

親要素にoverflow:hidden;することで親要素は高さを取得することができます。その親要素に子要素と同じ背景色で短い方のボックスがあたかも長い方のボックスと同じ高さかのように見せかけます。

別解 display:table display:table-cellで表として表示する

利用可能状況を見るにIE8以上でないと使えないようです。

CSSの一部

.child{
	border:1px solid #000000;
	width:298px;
	float:left;
	margin:10px;
}
		

背景色ならごまかせますが、ボーダーがあるとごまかしきれません。

まったく別の方法で解決します。displayで親要素にtableを設定し、子要素にdisplay:table-cellを設定します。こうすると親要素がtable要素であるかのように、子要素はtd要素であるかのように描画されます。注意点はtableと同じ扱いになるので幅が親要素の幅を基準として子要素の要素の幅によって按分されるということです。

CSSの一部

.parent{
	border:solid 1px #ff0000;
	width:600px;
	display:table;
	border-collapse:separate;
	border-spacing:10px;
}
.child{
	border:solid 1px #000000;
	display:table-cell;
}
		

まず4行目で親要素にdisplay:tableを設定します。そして子要素にdisplay:table-cellを設定します。これだけで勝手に横並びになって高さがそろいます。floatもしませんし、overflow:hiddenもしなくても親要素の高さが自動で子要素の大きい方に一致します。tableですから当たり前です。

残念なのがセルとセルの余白が自動です。（リセットCSSをお使いの場合セル間の隙間を取らない設定border-collapse:collapseが設定されている場合があります。ですから明示的にborder-collapse:separateにしてセル間を開けるにした方がいいでしょう。）border-spacing:10pxでセル間の余白を設定します。これは上、下、右、左一括指定です。個別に設定することも可能です。

子要素側は幅を設定していません。個別の幅にする場合は子要素にクラスを個別に振って指定します。指定されていない方は残りの幅が設定されます。

逆に子要素を均等幅にしたい場合は親要素に table-layout:fixedを設定するとうまくいきます。