CSS container div không nhận được chiều cao

116

Tôi muốn div container của mình nhận được chiều cao tối đa bằng chiều cao của trẻ em. mà không biết đứa trẻ divsẽ có chiều cao bao nhiêu. Tôi đã thử trên JSFiddle . Hộp đựng divcó màu đỏ. mà không hiển thị. Tại sao?

css css-float liquid-layout

— Neel Basu
nguồn

282

Thêm thuộc tính sau:

.c{
    ...
    overflow: hidden;
}

Điều này sẽ buộc vùng chứa phải tôn trọng chiều cao của tất cả các phần tử bên trong nó, bất kể các phần tử nổi.
http://jsfiddle.net/gtdfY/3/

CẬP NHẬT

Gần đây, tôi đang thực hiện một dự án yêu cầu thủ thuật này, nhưng cần phải cho phép hiển thị tràn, vì vậy, thay vào đó, bạn có thể sử dụng phần tử giả để xóa các phao của mình, đạt được hiệu quả tương tự trong khi cho phép tràn trên tất cả các phần tử.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— Nightfirecat
nguồn

8

Về cơ bản, việc thêm thuộc tính này buộc hộp bên ngoài bỏ qua quy tắc mà các thùng chứa nổi có, trong đó chúng không được tính chiều cao cho các thùng chứa và áp dụng chúng cho bản vẽ nền đầy đủ.

— Nightfirecat

4

Ồ, tôi đã nói, "Cái gì? Điều đó sẽ không hoạt động." Nhưng tôi sẽ yêu. Tôi hoàn toàn nghĩ rằng nó sẽ không cư xử đúng mực. Cảm ơn

— fie

1

Đây không phải là khá hacky thực sự? Đối với tôi, nó đánh bại mục đích tràn. Tôi không hiểu tại sao đây là câu trả lời chính xác và được ủng hộ nhiều nhất.

— Andrew Weir

3

@AndrewWeir Tôi sẽ thừa nhận, cho đến nay, tôi vẫn chưa hoàn toàn chắc chắn tại sao phương pháp mở rộng thùng chứa để xem xét chính xác các phao trong kích thước của chúng lại hoạt động. Theo đến nhiều nguồn , có vẻ như điều này gây ra một yếu tố để thay đổi chế độ dựng hình của nó, từ phép tràn có thể nhìn thấy không làm như vậy, và khi làm như vậy, điều này lực lượng yếu tố để không cho phép tràn đó.

— Nightfirecat

2

Cách đầu tiên, sử dụng tràn, phù hợp với tôi. Cách thứ hai CŨNG hoạt động và có vẻ ít rủi ro hơn trong trường hợp tôi bị tràn trong tương lai. Tôi chỉ ước mình có thể ủng hộ hai lần.

— Tyler Collier

28

Bạn đang thả nổi những đứa trẻ có nghĩa là chúng “lơ lửng” trước thùng chứa. Để lấy đúng chiều cao, bạn phải "dọn sạch" phao

Div style = "clear: both" xóa phần nổi an cung cấp chiều cao chính xác cho vùng chứa. xem http://css.maxdesign.com.au/floatutorial/clear.htm để biết thêm thông tin về phao.

ví dụ.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— Yoeri
nguồn

Điều này rõ ràng: cả hai; điều này dường như là một giải pháp thích hợp cho chiều cao của container, bởi vì vấn đề là trẻ em nổi. Vì vậy, cách tiếp cận này có vẻ tốt hơn là tràn: ẩn; một ở trên.

— Ronnie Depp

Cảm ơn @Yoeri đã chia sẻ giải pháp đơn giản này. Đồng ý! Tôi đang tìm giải pháp tương tự cho thiết kế mới của mình vì đã gần 6 năm kể từ lần cuối cùng tôi thiết kế bố cục web sau khi tôi chỉ tập trung vào quan điểm phát triển PHP thay vì thiết kế.

— Ronnie Depp

20

Nó không phải là dễ dàng hơn?

.c {
    overflow: auto;
}

— Antonio Romero Oca
nguồn

Vâng nó là: D. Cảm ơn

— Alauddin Ahmed

4

Hãy thử chèn div xóa này trước div cuối cùng </div>

<div style="clear: both; line-height: 0;"> </div>

— lee
nguồn

3

Giải pháp tốt nhất và chống đạn nhất là thêm ::beforevà ::aftergiả nguyên tố vào thùng chứa. Vì vậy, nếu bạn có ví dụ một danh sách như:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

Và mọi phần tử trong danh sách đều có thuộc float:lefttính, sau đó bạn nên thêm vào css của mình:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Hoặc bạn có thể thử thuộc display:inline-block;tính, sau đó bạn không cần thêm bất kỳ tiền tố rõ ràng nào.

— Agata
nguồn