Làm thế nào để làm cho một div tăng chiều cao trong khi có phao bên trong

121

Làm thế nào tôi có thể làm cho một div tăng chiều cao khi nó đã nổi bên trong nó? Tôi biết rằng việc xác định giá trị cho chiều rộng và đặt tràn thành các tác phẩm ẩn. Vấn đề là tôi cần một div với phần tràn có thể nhìn thấy. Có ý kiến gì không?

— pedrozath
nguồn

278

overflow:auto;trên div chứa làm cho mọi thứ bên trong nó (ngay cả các mục nổi) có thể nhìn thấy và div bên ngoài hoàn toàn bao bọc xung quanh chúng. Xem ví dụ này:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Mở rộng đoạn mã

— JakeParis
nguồn

7

Vâng, nó tương đối hoạt động, nhưng nó có nguy cơ tạo ra các thanh cuộn .. phải không?

— pedrozath

1

Không, không phải tôi biết về @pedro. Các div bên ngoài chỉ nên tiếp tục mở rộng để bọc các div bên trong. hãy thử nó trong fiddle, tăng kích thước của các div bên trong và xem điều gì sẽ xảy ra.

— JakeParis

2

Tôi đã thử điều này và một thanh cuộn nhỏ cao khoảng 2em xuất hiện ở bên phải của cửa sổ trình duyệt.

— Nigel Alderton

1

@NigelAlderton điều này đã xảy ra với tôi vì tôi đã buộc chiều cao của vùng chứa (nơi overflowđã được thêm vào). Cố định nó bằng cách loại bỏ các overflow: auto;từ lớp, cũng như heightchọn

— eggy

16

Có nhiều cách để xóa phao nổi. Bạn có thể kiểm tra một số tại đây:
http://work.arounds.org/issue/3/clearing-floats/

Ví dụ: clear:bothcó thể hiệu quả với bạn

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

— Nikita Rybak
nguồn

1

Lợi ích của phương pháp này là overflow: auto;sẽ cắt nội dung (như trang trí tiêu điểm) tràn ra bên ngoài phần tử, nhưng điều này sẽ không.

— Dan

tràn: tự động tạo thanh cuộn ngang cho tôi, vì vậy tôi không thể sử dụng nó. Điều này đã hoạt động hoàn hảo.

— Edwin Stoteler

Chính xác những gì tôi đang tìm kiếm. Đã áp dụng CSS này cho cha mẹ. Nó mở rộng chiều cao của <div> cha, để phần tử float vẫn nằm trong nó. Thanh lịch, bởi vì nó ghi rõ ràng rằng: "đáy của phụ huynh phải xóa phao."

— IAM_AL_X

12

Trong nhiều trường hợp, overflow: auto;sẽ là đủ, nhưng để hoàn thiện và hỗ trợ nhiều trình duyệt, hãy xem Clearfix sẽ thực hiện công việc cho tất cả các trình duyệt.

Hãy xem xét đánh dấu sau ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Cùng với những phong cách sau ..

.content { float:left; }

.clearfix { ..from link.. }

Nếu không có tiền tố rõ ràng, cha mẹ divsẽ không có chiều cao do đó là con nổi. Clearfix sẽ làm cho cha mẹ coi là những đứa trẻ trôi nổi.

— miphe
nguồn

2

Clearfix là đánh dấu bổ sung. Đơn giản chỉ cần cung cấp cho các div cha mẹ đánh dấuoverflow: auto;

— JakeParis

7

Tôi nhận ra rằng một cách tuyệt vời để làm điều đó là thiết lập display: tabletrên div.

— pedrozath
nguồn