Độ cao div 100% cao của cha mẹ động mà không có vị trí tuyệt đối?

Question

Tôi đã đọc rất nhiều ở đây và không thể tìm thấy giải pháp cho câu trả lời của tôi.

Tôi có div vùng chứa, với nhiều div được thả nổi bên trái, theo html bên dưới.

<div class="catbg0" id="b1"> 

    <div class="catb1">#</div> 
    <div class="catb2">Board Name</div> 
    <div class="catb3">Topics</div> 
    <div class="catb4">Posts</div> 
    <div class="catb5">Last Post</div> 
    <div class="clearboth"></div> 

</div> 

Vấn đề của tôi là .catbg0 không có một chiều cao cụ thể, nội dung của .catb2 đẩy nó xuống với chiều cao của nó, và như nội dung có thể thay đổi tôi không thể thiết lập một chiều cao cụ thể. Tôi muốn phần còn lại của các lớp .catb đi đến 100% chiều cao của lớp .catbg0, nhưng thiết lập chiều cao: 100%; không hoạt động.

Dưới đây là CSS liên quan đến điều trên.

.catb1 {float: left; width: 9%; height: 100%; min-height: 100%;} 
.catb2 {float: left; width: 52%; height: 100%; min-height: 100%;} 
.catb3 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb4 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb5 {float: left; width: 23%; height: 100%; min-height: 100%;} 
.clearboth {clear: both; height:0; width: 0; margin: 0; padding: 0;} 

Mọi ý tưởng? Cảm ơn.

Answer 1

Như tôi biết chỉ chặn với vị trí: tuyệt đối có thể có chiều cao 100% và con của nó.

Nếu bạn chắc chắn rằng .catb2 có chiều cao lớn nhất của .catb * cố gắng thêm wrapper:

<div class="catbg0" id="b1"> 

    <div class="catb2">Board Name</div> 

    <div class="wrapper"> 
     <div class="catb1">#</div> 
     <!-- margin == catb2 width --> 
     <div class="catb3">Topics</div> 
     <div class="catb4">Posts</div> 
     <div class="catb5">Last Post</div> 
    </div> 

    <div class="clearboth"></div> 

</div> 

CSS

.catbg0 { position: relative; } 
.wrapper { position: absolute; width: 100%; height: 100%; } 
.catb2 { margin-left: /* catb1 width here */ } 

T.B. Có thể nó sẽ hữu ích cho bạn - A new micro clearfix hack

Answer 2

Tôi không chắc lắm. Nhưng cho thùng chứa (catbg0) tràn: ẩn; có thể làm việc. Thông thường những gì này làm là kéo dài div mà nó được áp dụng cho (Khi một chiều cao cụ thể không được thiết lập).

Lưu ý: nó vẫn là một tràn, từ dài vv và divs sẽ chỉ tiếp tục kể từ khi mặt nạ tràn div.