Tampilan CSS: tinggi minimum tabel tidak berfungsi

104

Adakah yang tahu saya bisa membuat min-height bekerja dengan browser terbaru? Saya menggunakan tabel CSS dan sepertinya mengabaikan min-height.

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

Biola

css Samantha JT Star
sumber
1
posting serupa: stackoverflow.com/questions/25238/100-min-height-css-layout
diEcho
1
Bisakah Anda menentukan tabel CSS ? Punya markup?
alex
1
posting html Anda, css yang sesuai dan, jika memungkinkan, berikan link ke situs Anda (atau coba buat jsfiddle.net ) untuk menunjukkan masalah Anda.
oezi
Ini masih menjadi masalah dengan FireFox, meskipun bug tersebut dilaporkan sejak empat belas tahun. bugzilla.mozilla.org/show_bug.cgi?id=307866
Frédéric

Jawaban:

204

Saat menggunakan tabel, tinggi pada dasarnya adalah min-height, karena tabel selalu meregang. Singkirkan saja "min-" dan itu akan bekerja seperti yang Anda harapkan.

swider
sumber
13
Ini benar-benar tidak intuitif, tetapi tepat. Hasil terbaik tampaknya datang dengan meletakkan ketinggian "tetap" pada display: table-cellelemen terdalam .
eternicode
4
Saya belum menguji di IE tetapi tampaknya Firefox adalah satu-satunya yang masih terpengaruh oleh ini.
Dex
2
Dikonfirmasi itu heightberfungsi dan min-heighttidak di Chrome 37, Safari 7 dan FF 32 di mac. IE11 di Win 8.1 memberikan perilaku yang benar di keduanya. jsfiddle.net/nuwcyvwn/1
Stephan Muller
1
Tidak benar. Jika saya ingin meja menjadi SETIDAKNYA setinggi 8 inci (saya menggunakan css untuk kontrol cetak) dan tidak memiliki cukup baris untuk mengisinya, tetapi saya memiliki tfoot yang ditentukan, saya dapat memberikan baris spacer (diizinkan untuk meregang secara vertikal), sambil mendefinisikan tinggi di baris saya yang lain untuk memastikan tidak dan apa yang saya dapatkan adalah celah besar yang membuat footer saya tetap di tempatnya. Berfungsi dengan baik di Chrome, tetapi tidak dengan FF atau konverter PDf yang saya gunakan; wkhtmltopdf. Ya, tinggi memang berfungsi, tetapi tidak berarti sama secara semantik dengan min-height.
rainabba
7

Gunakan height: 1px;di atas meja atau nilai apa pun. Pada dasarnya Anda perlu memberi meja beberapa ketinggian untuk membuatnya berfungsi min-height. Memiliki hanya min-heighttidak akan berfungsi pada tabel di firefox.

virajs0ni.dll
sumber
4
OP menanyakan bagaimana membuatnya bekerja dengan browser terbaru. Saya baru saja memberinya solusi. Bagaimana tidak akurat?
virajs0ni
berikan beberapa tinggi seperti tinggi: 1px seperti yang Anda katakan, lalu mulai bekerja
Mohamed Hussain
1

Kapan pun Anda menggunakan display:table;atau properti yang lebih dalam seperti display:table-cell;pertimbangkan untuk menggunakan heightdaripada min-height. Seperti pada tabel height = min-height dengan mempertimbangkan fitur auto-span di dalamnya.

Ahmad Awais
sumber
1

Solusi untuk Firefox

Tambahkan tinggi untuk membuka kunci pengaturan min-height

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

Angka tinggi dapat berupa nilai nyata lainnya yang kurang atau sama dengan min-height agar berfungsi seperti yang diharapkan.

Mike Winchester
sumber