状況 †
テーブルタグを使わずに、3カラム(左、中央、右)+フッタ構成で高さを整える。
確認したときの環境 †
- Firefox 3
- Chrome 2
- IE 8
- Opera 9
- Safari 4
概要 †
- 下側のpaddingであり得ない値をとる
- 同じく下側のmarginでネガティブ指定し帳尻を合わせる
方法 †
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
| -
|
!
-
|
!
-
|
!
-
|
|
|
|
|
|
!
-
|
!
-
|
|
|
|
|
|
!
-
|
!
-
|
|
|
|
|
!
|
div#column_set {
overflow: hidden;
}
div#left_column {
overflow: hidden;
float: left;
width: 150px;
border-right: 1px solid #131313;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
div#right_column {
overflow: hidden;
float: right;
width: 150px;
border-left: 1px solid #131313;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
div#center_column {
overflow: hidden;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
|
補足 †
- 対策値の上限は32768pxと-32768pxらしいのですが、この値にするとOpera 9ではものすごい長さの表示となってしまいました。
- 3カラムをまとめているdiv#column_setではみ出し部分を非表示にしないと機能しませんが、これを有効にすると、中央カラムでアンカーを設定している場合に、アンカー部分へ飛ぶと上方向にスクロールできなくなりました。