float で並べた2つの要素の高さを揃える方法

2カラムレイアウトや3カラムレイアウトでdivでfloatするレイアウトを作成することが多いですよね。
また、レスポンシブルレイアウトに対応させるために、CSSで各要素を横並びしたりすることがよくあります。
そんな時に、背景色等の問題で高さを揃えたい時に使えるテクニックです。

親コンテンツに対してのCSS

親コンテンツには、

• min-height: 100%;
• overflow: hidden;

を指定しておく。

子コンテンツに対してのCSS

子コンテンツには、

• padding-bottom: 32767px;
• margin-bottom: -33767px;
• height: 100%;

を指定しておく。

li,dt,ddで画像の上下の隙間を詰める方法

li,dt,ddで画像を並べる際に、画像の上下に隙間ができます。隙間無く表示させたいとき、marginやpaddingを0pxにしても詰まらないですよね。
そんな時には、以下の2つの方法があります。

imgにvertical-align:bottom;を指定する方法

li img, dt img dd,img {
    vertical-align: bottom;
}

font-sizeとline-heightを0pxにする方法

li, dt, dd {
    font-size: 0px;
    line-height: 0px;
}

ウィンドウの高さに合わせたブロック要素

CSSで高さ100%のブロック要素を作成したい場合、heightプロパティに対して100%の指定をしても反映されません。

これは、CSSの仕様で、親要素のheightに対しての割合で反映されるため、親要素に明示的にheightが指定されていない場合は、height:autoが継承されるようになっています。

ウィンドウの高さに合わせたブロック要素を作成したい場合、htmlタグとbodyタグのheightプロパティを100%と指定しておくことにより、height100%のdiv要素を作成することが出来ます。