CSS表示：テーブルの最小高さが機能しない

104

最新のブラウザでmin-heightを動作させることができることを誰かが知っていますか？CSSテーブルを使用していますが、min-heightを無視しているようです。

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

フィドル

css

— サマンサJTスター
ソース

1

同様の投稿：stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

CSSテーブルを定義できますか？マークアップをお持ちですか？

— 2011年

1

あなたのhtmlと一致する cssを投稿し、可能であれば、あなたのサイトへのリンクを提供して（またはjsfiddle.netを作成してみて）、問題を表示します。

— oezi

バグは14年以来報告されていますが、これはまだFireFoxの問題です。bugzilla.mozilla.org/show_bug.cgi?id=307866

— フレデリック

204

テーブルを使用する場合、テーブルは常に伸縮するため、高さは基本的に最小高さです。「min-」を取り除くだけで、期待どおりに機能します。

— 蜘蛛
ソース

13

これは完全に直感的ではありませんが、スポットオンです。最も良い結果は、最も内側のdisplay: table-cell要素に「固定された」高さを置くことで得られるようです。

— eternicode、2012

4

私はIEでテストしていませんが、Firefoxだけがまだこの影響を受けています。

— Dex

2

MacではChrome 37、Safari 7、FF 32ではheight機能し、min-height機能しないことを確認しました。Win 8.1のIE11は両方で正しい動作をします。jsfiddle.net/nuwcyvwn/1

— ステファンミュラー

1

違います。テーブルの高さを8インチ以上にしたい（印刷制御にcssを使用）が、それを埋めるのに十分な行がないが、tfootを定義している場合は、定義中にスペーサー行（垂直に伸ばすことができます）を指定できます。他の行の高さを確認し、フッターが本来あるべき位置に保たれる大きなギャップを確保します。Chromeではうまく機能しますが、FFや私が使用しているPDfコンバータでは機能しません。wkhtmltopdf。はい、高さは機能しますが、意味的にmin-heightと同じことを意味するわけではありません。

— Rainabba 2016

7

height: 1px;テーブルまたは任意の値で使用します。基本的に、で動作させるには、テーブルに高さを設定する必要がありますmin-height。のみ持つことは、min-heightFirefoxの上のテーブル上では動作しません。

— virajs0ni
ソース

4

OPは、最新のブラウザで動作させる方法を尋ねています。私は彼に解決策を与えました。どうして正確ではないのですか？

— virajs0ni 2015

あなたが言ったようにheight：1pxのような高さを与えてください、それからそれは働き始めました

— Mohamed Hussain

1

あなたが使用しているときは常にdisplay:table;等の任意の深い財産display:table-cell;使用することを検討してくださいheight代わりにmin-height。テーブルのように、高さ=最小高さの自動スパン機能を考慮します。

— アフマドアワイス
ソース

1

Firefoxのソリューション

高さを追加して最小高さの設定をロック解除します

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

高さの数値は、期待どおりに機能させるために、min-height以下の実際の値にすることができます。

— マイク・ウィンチェスター
ソース