HOME > 開発者向けBLOG > Webデザイン >  高さを揃える

Technology Note 開発者向けBLOG

Webデザイン

高さを揃える

こんにちは、ゼノフィ渡部です。

ブロック要素をCSSだけで最も高いものに揃える方法をご紹介いたします。

横並びにするブロック要素のマージンボトムにパディングのプラス値と同じ値を、パディングボトムにマージンのマイナス値と同じ値を指定します。

1
2
3
4
5
6

div.box_area div {
  float: left;
  width: 200px;
  margin: 0 40px -32767px 0; /* プラス値と同じ値を指定 */
  padding: 0 0 32767px; /* マイナス値と同じ値を指定 */
}

3つのdiv要素を記述しています。2つめの要素のテキストが最も多くなっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- ボーダーなし -->
<p>
    ボーダーなし
</p>
<div class="box_area clearfix">
    <div class="box01">
        <p>
            テキスト
        </p>
    </div>
    <div class="box02">
        <p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
    <div class="box03">
        <p>
            テキスト
        </p>
    </div>
</div>
<!-- /ボーダーなし -->

サンプルを見ると最もテキストの多い要素に追従にして、他のdiv要素の背景も伸びて、高さが揃っていることがわかります。ただ、「.clearfix」の「overflow: hidden;」プロパティで下の要素に対し、フロートを解除している関係で、「border: 1px solid #333;」などを指定してもボトム部分のボーダーが表示されないので注意が必要です。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

p {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
div.box_area {
  margin: 0 0 40px;
}
 
div.box_area div {
  float: left;
  width: 200px;
  margin: 0 40px -32767px 0; /* プラス値と同じ値を指定 */
  padding: 0 0 32767px;    /* マイナス値と同じ値を指定 */
}
 
div.box_area div.box01 {
  background: #EFEFEF;
}
 
div.box_area div.box02 {
  background: #999;
}
 
div.box_area div.box03 {
  background: #CCC;
}
 
div.box_area div.border {
  width: 198px;
  border: 1px solid #333;
}
 
div.box_area div p {
  padding: 10px;
}
 
/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
 
.clearfix {
  overflow: hidden;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!-- ボーダーなし -->
<p>
    ボーダーなし
</p>
<div class="box_area clearfix">
    <div class="box01">
        <p>
            テキスト
        </p>
    </div>
    <div class="box02">
        <p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
    <div class="box03">
        <p>
            テキスト
        </p>
    </div>
</div>
<!-- /ボーダーなし -->
 
<!-- ボーダーあり -->
<p>
    ボーダーあり
</p>
<div class="box_area clearfix">
    <div class="box01 border">
        <p>
            テキスト
        </p>
    </div>
    <div class="box02 border">
        <p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
    </div>
    <div class="box03 border">
        <p>
            テキスト
        </p>
    </div>
</div>
<!-- /ボーダーあり -->

<

>

PAGETOP