Hiển thị CSS: chiều cao tối thiểu của bảng không hoạt động

104

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

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

Vĩ cầm

css

— Ngôi sao Samantha JT
nguồn

1

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

— diEcho

1

Bạn có thể định nghĩa 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 một liên kết đến trang web của bạn (hoặc thử xây dựng jsfiddle.net ) để hiển thị vấn đề của bạn.

— oezi

Đây vẫn là một vấn đề với FireFox, mặc dù lỗi đã được báo cáo từ 14 năm trước. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

Khi sử dụng bảng, chiều cao về cơ bản là chiều cao tối thiểu, vì bảng luôn kéo dài. Chỉ cần loại bỏ "min-" và nó sẽ hoạt động như bạn mong đợi.

— swider
nguồn

13

Điều này là 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ư đến với việc đặt chiều cao "cố định" trên các display: table-cellphần tử trong cùng .

— eternicode

4

Tôi chưa thử nghiệm trên 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

Đã xác nhận rằng nó heighthoạt động và min-heightkhông hoạt động trong Chrome 37, Safari 7 và FF 32 trên mac. IE11 trên Win 8.1 cung cấp hành vi chính xác trong cả hai. jsfiddle.net/nuwcyvwn/1

— Stephan Muller

1

Không đúng. Nếu tôi muốn một bảng có chiều cao ÍT NHẤT 8 inch (tôi sử dụng css để điều khiển in) và nó thiếu đủ hàng để điền vào nó, nhưng tôi đã xác định tfoot, tôi có thể cung cấp một hàng đệm (được phép kéo dài theo chiều dọc), trong khi xác định chiều cao trên các hàng khác của tôi để đảm bảo chúng không bị lỗi và những gì tôi nhận được là một khoảng trống lớn giữ chân trang của tôi ở vị trí đáng lẽ. Hoạt động tốt trong Chrome, nhưng không hoạt động tốt trong FF hoặc trình chuyển đổi PDf mà tôi đang sử dụng; wkhtmltopdf. Có, chiều cao hoạt động, nhưng không có nghĩa giống nhau về mặt ngữ nghĩa với chiều cao tối thiểu.

— rainabba

7

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

— virajs0ni
nguồn

4

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

đưa ra một số chiều cao như chiều cao: 1px như bạn nói, sau đó nó bắt đầu làm việc

— Mohamed Hussain

1

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

— Ahmad Awais
nguồn

1

Giải pháp cho Firefox

Thêm chiều cao để mở khóa cài đặt chiều cao tối thiểu

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

Số chiều cao có thể là bất kỳ giá trị thực nào khác nhỏ hơn hoặc bằng chiều cao tối thiểu để làm cho nó hoạt động như mong đợi.

— Mike Winchester
nguồn