囲まれた中に、指定した高さを超える行の文字が存在すると、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の表示がおかしい」などの理論はいりません。
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 を使う。( _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・・・使わせていただきます。
「最低限確保したい高さ」を指定するのは「height」ではなく「min-height」です。
ありがとうございました。
min-height・・・使わせていただきます。
ありがとうございました。
min-height・・・使わせていただきます。