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

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

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

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

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

実は中の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を導入してある状態での使用をオススメします。