CSS görüntüleme: tablo minimum yüksekliği çalışmıyor

104

En son tarayıcılarla minimum yükseklik çalışması yapabileceğimi bilen var mı? CSS tabloları kullanıyorum ve minimum yüksekliği görmezden geliyor gibi görünüyor.

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

Vaktini boşa harcamak

css

— Samantha JT Yıldızı
kaynak

1

benzer gönderi: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

CSS tabloları tanımlayabilir misiniz ? İşaretiniz var mı?

— alex

1

html'nizi , uygun css'i gönderin ve mümkünse , sorununuzu göstermek için sitenize bir bağlantı verin (veya bir jsfiddle.net oluşturmayı deneyin ).

— oezi

Hata on dört yıldan beri bildirilse de, bu hala FireFox ile ilgili bir sorundur. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

Tabloları kullanırken, tablolar her zaman esnediğinden, yükseklik esasen minimum yüksekliktir. Sadece "min-" den kurtulun ve beklediğiniz gibi çalışacaktır.

— swider
kaynak

13

Bu tamamen sezgisel değil, ancak yerinde. En iyi sonuçlar, en içteki display: table-cellöğelere "sabit" yüksekliğin konmasıyla gelir .

— eternicode

4

IE'de test etmedim ama görünüşe göre Firefox bundan etkilenen tek kişi.

— Dex

2

Mac'teki Chrome 37, Safari 7 ve FF 32'de heightçalıştığı ve min-heightçalışmadığı doğrulandı . Win 8.1'deki IE11, her ikisinde de doğru davranışı verir. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Doğru değil. Bir tablonun EN AZ 8 inç uzunluğunda olmasını istiyorsam (baskı kontrolü için css kullanıyorum) ve onu doldurmak için yeterli satır yoksa, ancak tanımlanmış bir tfoot'um varsa, tanımlarken bir boşluk satırı sağlayabilirim (dikey olarak uzamasına izin verilir) Diğer satırlarımda olmadıklarından emin olmak için yükseklik ve aldığım şey, altbilgimi olması gereken yerde tutan büyük bir boşluk. Chrome'da harika çalışıyor, ancak FF veya kullandığım PDf dönüştürücüsünde değil; wkhtmltopdf. Evet, yükseklik işe yarar, ancak anlamsal olarak min-yükseklik ile aynı anlama gelmez.

— rainabba

7

height: 1px;Masada veya herhangi bir değerde kullanın . Temel olarak, çalışabilmesi için masaya biraz yükseklik vermeniz gerekir min-height. Yalnızca sahip olmak min-heightfirefox'taki masalarda çalışmaz.

— Virajs0ni
kaynak

4

OP, en son tarayıcılarla nasıl çalışacağını soruyor. Ona sadece bir çözüm verdim. Nasıl doğru değil?

— virajs0ni

yükseklik gibi biraz yükseklik verin: dediğin gibi 1px, sonra çalışmaya başladı

— Mohamed Hussain

1

Ne zaman kullanırsanız display:table;veya bunun yerine daha derin bir özelliği display:table-cell;kullanmayı düşünün . Tablolarda olduğu gibi yükseklik = minimum yükseklik, içlerindeki otomatik yayılma özelliği dikkate alınarak.heightmin-height

— Ahmad Awais
kaynak

1

Firefox için Çözüm

Minimum yüksekliği ayarlamanın kilidini açmak için yükseklik ekleyin

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

Yükseklikteki sayı, beklendiği gibi çalışmasını sağlamak için minimum yükseklikten daha küçük veya buna eşit başka bir gerçek değer olabilir.

— Mike Winchester
kaynak