囲まれた中に、指定した高さを超える行の文字が存在すると、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行の場合も有り得ます。
「本来はそれが正解でＩＥの表示がおかしい」などの理論はいりません。
No.1
426
81
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>
No.1
42681
ここでベストアンサー
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>
ありがとうございました。
min-height・・・使わせていただきます。
No.2
1258
35pt
「最低限確保したい高さ」を指定するのは「height」ではなく「min-height」です。
ありがとうございました。
min-height・・・使わせていただきます。
54
53
3
4
2
ありがとうございました。
min-height・・・使わせていただきます。