読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

table-cell内の子要素の高さを100%にする

f:id:yamato-ugaki:20170414195116j:plain

こんにちは。
Webコーダーの宇垣です。

左右の要素の高さを揃えたり、左右均等に割ったり、カラム落ちをなくすにはかなり便利なtable-cellです。
しかしtable-cellは、セル自体の高さは揃えられてもその中に入っている子要素の高さは揃えられていません。

f:id:yamato-ugaki:20170414195730j:plain



一見簡単そうに見えるこのデザインも実は少し手間がかかります。

f:id:yamato-ugaki:20170414195543j:plain

コアラの見出し部分が、コンテンツの高さがない分の高さも維持しないといけないようです。


f:id:yamato-ugaki:20170414195754j:plain
実は中のdivとコンテンツもテーブルなんです。高さを維持したくて。

コアラ
写真
パンダ

写真写真


<div class="out_table">
	<div class="out_cell">
		<dl>
			<dt>パンダ</dt>
			<dd>
				<span class="box">写真</span>
			</dd>
		</dl>
	</div>

	<div class="out_cell">
		<dl>
			<dt>パンダ</dt>
			<dd>
				<span class="box">写真</span>
				<span class="box">写真</span>
			</dd>
		</dl>
	</div>
</div>
.out_table {
	display:table;
	width:100%;
	height: 100%;
}
.out_cell {
	display:table-cell;
	padding:30px;
	background-color:#eee;
	border:1px solid #ccc;
	width:50%;
	vertical-align:top;
}
.out_table .box {
	text-align:center;
	padding:10px;
	margin-bottom:10px;
	background-color:#fff;
	display:inline-block;
	width:100%;

}
.out_table .box:last-child {margin-bottom:0px;}
.out_table dl {
	display:table;
	width:100%;
	margin-bottom:0px;
    height: 100%;
}
.out_table dt {
	display:table-cell;
	background-color:#D58083;
	text-align:center;
	vertical-align:middle;
	height: 100%;
}
.out_table dd{
	display:table-cell;
}
.out_table p {margin-bottom:0px!important;}

明らかに10pxとか20pxとか高さがずれているな、という場合は何かにマージンが付いている可能性があります。
リセットCSS・box-sizingを導入してある状態での使用をオススメします。

ページトップ