人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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の表示がおかしい」などの理論はいりません。

●質問者: kurokumi
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS firefox HTML まら タグ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GoldenDawn
●35ポイント ベストアンサー

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・・・使わせていただきます。


2 ● jiangmin
●35ポイント

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ