Firefoxで、divタグを使用して最低限確保したい高さをcssのheightで指定したとき、

囲まれた中に、指定した高さを超える行の文字が存在すると、tableタグのようには
高さが拡大せず、以降の文字と重なり、レイアウトがくずれます。

<!-- くずれないtableタグ -->
<table>
<tr>
<td style="height:50px; border:1px solid red;">
収まらず拡大する<br>
収まらず拡大する<br>
収まらず拡大する<br>
収まらず拡大する<br>
</td>
</tr>
<tr>
<td>重ならずに見える文字</td>
</tr>
</table>

<!-- くずれるdivタグ -->
<div style="height:50px; border:1px solid red;">
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
</div>
<div>重なってみえなくなる文字</div>

divタグを使用しながらtableタグのように、高さが「指定した最低幅+はみだし分」にするにはどうすればよいでしょうか。
静的HTMLではなく動的ページなので、事前に高さを予想することは不可能で、0行の場合もあれば、100行の場合も有り得ます。
「本来はそれが正解でIEの表示がおかしい」などの理論はいりません。

回答の条件
  • 1人3回まで
  • 登録:2008/09/13 16:13:01
  • 終了:2008/09/13 16:52:32

ベストアンサー

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/09/13 16:32:18

ポイント35pt

min-height を使う。( _height は IE用のハック)

<div style="_height:50px;min-height:50px; border:1px solid red;">
一行なのでたぶんはみ出ない
</div>
<!-- くずれるdivタグ -->
<div style="_height:50px;min-height:50px; border:1px solid red;">
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
</div>
<div>重なってみえなくなる文字</div>
id:kurokumi

ありがとうございました。

min-height・・・使わせていただきます。

2008/09/13 16:51:43

その他の回答(1件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812008/09/13 16:32:18ここでベストアンサー

ポイント35pt

min-height を使う。( _height は IE用のハック)

<div style="_height:50px;min-height:50px; border:1px solid red;">
一行なのでたぶんはみ出ない
</div>
<!-- くずれるdivタグ -->
<div style="_height:50px;min-height:50px; border:1px solid red;">
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
収まらずはみ出る<br>
</div>
<div>重なってみえなくなる文字</div>
id:kurokumi

ありがとうございました。

min-height・・・使わせていただきます。

2008/09/13 16:51:43
id:jiangmin-alt No.2

jiangmin回答回数125ベストアンサー獲得回数82008/09/13 16:34:37

ポイント35pt

「最低限確保したい高さ」を指定するのは「height」ではなく「min-height」です。

id:kurokumi

ありがとうございました。

min-height・・・使わせていただきます。

2008/09/13 16:51:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません