2011-10-17 34 views
88

Có ai biết tôi có thể làm cho min-height hoạt động với các trình duyệt mới nhất không? Tôi đang sử dụng các bảng CSS và có vẻ như bỏ qua min-height.Hiển thị CSS: bảng tối thiểu không hoạt động

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

Fiddle

+1

bài đăng tương tự: http://stackoverflow.com/questions/25238/100-min-height-css-layout – diEcho

+1

Bạn có thể xác định * bảng CSS * không? Có một số đánh dấu? – alex

+1

đăng html của bạn, theo css và, nếu có thể, hãy cung cấp liên kết tới trang web của bạn (hoặc thử xây dựng http://jsfiddle.net/) để hiển thị sự cố của bạn. – oezi

Trả lời

178

Khi sử dụng bảng, chiều cao thực chất là min-height, như bảng luôn căng. Chỉ cần thoát khỏi "min-" và nó sẽ hoạt động như bạn mong đợi.

+12

Điều này hoàn toàn không trực quan, nhưng ngay lập tức. Kết quả tốt nhất dường như đi kèm với việc đặt chiều cao "cố định" trên các phần tử 'display: cell' trong cùng. – eternicode

+2

Đã không làm việc cho tôi. – chovy

+3

Tôi chưa thử nghiệm trong IE nhưng có vẻ như Firefox là người duy nhất vẫn bị ảnh hưởng bởi điều này. – Dex

2

Sử dụng height: 1px; trên bảng hoặc bất kỳ giá trị nào. Về cơ bản bạn cần phải cung cấp cho một số bảng chiều cao để làm cho nó hoạt động với min-height. Chỉ có min-height sẽ không hoạt động trên các bảng trên firefox.

+3

OP đang hỏi cách làm cho nó hoạt động với trình duyệt mới nhất. Tôi chỉ cho anh ta một giải pháp. Làm thế nào là nó không chính xác? – virajs0ni

+0

cho một số chiều cao như chiều cao: 1px như bạn đã nói, sau đó nó bắt đầu hoạt động –

1

Bất cứ khi nào bạn đang sử dụng display:table; hoặc tài sản nào sâu hơn như display:table-cell; xem xét sử dụng height thay vì min-height. Như trong bảng chiều cao = min-chiều cao xem xét tính năng tự động span trong chúng.

Các vấn đề liên quan