การแสดง CSS: ความสูงต่ำสุดของตารางไม่ทำงาน

104

มีใครรู้บ้างว่าฉันสามารถทำให้ความสูงต่ำสุดใช้งานได้กับเบราว์เซอร์ล่าสุด ฉันใช้ตาราง CSS และดูเหมือนว่าจะไม่สนใจ min-height

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

ซอ

css

— ซาแมนธาเจทีสตาร์
แหล่งที่มา

1

โพสต์ที่คล้ายกัน: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

คุณกำหนดตาราง CSS ได้ไหม มีมาร์กอัปบ้างไหม

— alex

1

โพสต์ html ของคุณตาม css และถ้าเป็นไปได้ให้ลิงค์ไปยังไซต์ของคุณ (หรือลองสร้างjsfiddle.net ) เพื่อแสดงปัญหาของคุณ

— oezi

นี่ยังคงเป็นปัญหากับ FireFox แม้ว่าจะมีการรายงานข้อผิดพลาดตั้งแต่สิบสี่ปี bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

เมื่อใช้ตารางความสูงโดยพื้นฐานแล้วคือความสูงขั้นต่ำเนื่องจากตารางจะยืดออกเสมอ เพียงกำจัด "min-" และมันจะทำงานตามที่คุณคาดหวัง

— swider
แหล่งที่มา

13

สิ่งนี้ไม่ได้ใช้งานง่าย แต่เฉพาะจุด ผลลัพธ์ที่ดีที่สุดดูเหมือนจะมาพร้อมกับการวางความสูง "คงที่" ไว้ที่display: table-cellองค์ประกอบด้านในสุด

— นิรันดร์โค้ด

4

ฉันไม่ได้ทดสอบใน IE แต่ดูเหมือนว่า Firefox จะเป็นตัวเดียวที่ยังได้รับผลกระทบจากสิ่งนี้

— Dex

2

ยืนยันว่าใช้heightงานได้และใช้min-heightไม่ได้ใน Chrome 37, Safari 7 และ FF 32 บน Mac IE11 บน Win 8.1 ให้พฤติกรรมที่ถูกต้องทั้งสองอย่าง jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

ไม่จริง. ถ้าฉันต้องการให้ตารางมีความสูงอย่างน้อย 8 นิ้ว (ฉันใช้ css สำหรับการควบคุมการพิมพ์) และไม่มีแถวเพียงพอที่จะเติมเต็มได้ แต่ฉันมีการกำหนด tfoot ฉันสามารถจัดเตรียมแถวตัวเว้นวรรค (อนุญาตให้ยืดในแนวตั้ง) ในขณะที่กำหนด ความสูงบนแถวอื่น ๆ ของฉันเพื่อให้แน่ใจว่าพวกเขาไม่ทำและสิ่งที่ฉันได้รับคือช่องว่างขนาดใหญ่ที่ทำให้ส่วนท้ายของฉันอยู่ในตำแหน่งที่ควรจะเป็น ใช้งานได้ดีใน Chrome แต่ไม่ใช่ FF หรือตัวแปลง PDf ที่ฉันใช้ wkhtmltopdf. ใช่ความสูงใช้ได้ แต่ไม่ได้หมายถึงความหมายเดียวกันกับความสูงต่ำสุด

— rainabba

7

ใช้height: 1px;บนโต๊ะหรือค่าใด ๆ โดยทั่วไปคุณต้องให้ความสูงของโต๊ะเพื่อให้ใช้งานmin-heightได้ การมีเพียงอย่างเดียวmin-heightจะใช้ไม่ได้กับตารางบน firefox

— virajs0ni
แหล่งที่มา

4

OP กำลังถามวิธีทำให้มันทำงานกับเบราว์เซอร์ล่าสุด ฉันแค่ให้เขาแก้ปัญหา ไม่แม่นยังไง

— virajs0ni

ให้ความสูงเช่นความสูง: 1px ตามที่คุณกล่าวจากนั้นมันก็เริ่มทำงาน

— Mohamed Hussain

1

เมื่อใดก็ตามที่คุณกำลังใช้display:table;หรือทรัพย์สินลึกใด ๆ เช่นdisplay:table-cell;พิจารณาใช้แทนheight min-heightเช่นเดียวกับในตาราง height = min-height โดยพิจารณาจากคุณสมบัติ auto-span ในนั้น

— อะหมัดอะแวส
แหล่งที่มา

1

โซลูชันสำหรับ Firefox

เพิ่มความสูงเพื่อปลดล็อกการตั้งค่าความสูงต่ำสุด

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

จำนวนความสูงอาจเป็นมูลค่าจริงอื่น ๆ ที่น้อยกว่าหรือเท่ากับความสูงต่ำสุดเพื่อให้ทำงานได้ตามที่คาดไว้

— ไมค์วินเชสเตอร์
แหล่งที่มา