Chiều cao con div 100% chiều cao tự động của phụ huynh

Question

Ở đây vì các câu hỏi tương tự khác không thể giúp được vấn đề cụ thể của tôi.

Tôi cần right div để có chiều cao 100% mọi lúc, nơi chiều cao parent phụ thuộc vào chiều cao left div phụ thuộc vào nội dung bên trong.

Đây là html:

<div class="container clearfix"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

Đây là CSS:

.container{ 
    min-height: 10px; 
    width: auto; 
    height: auto; 
    background-color: #eeeeee; 
} 

.left{ 
    position: relative; 
    float: left; 
    min-height: 100px; 
    width: 50px; 
    background-color: #dddddd; 
} 

.right{ 
    min-height: 20px; 
    position: relative; 
    float: left; 
    height: 100%; 
    width: 50px; 
    background-color: #dddddd; 
} 

. 

.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
} 

Lưu ý:
Tôi đang sử dụng clearfix.
Và nếu bạn có thể hiển thị câu trả lời trong jsfiddle

Đây là jsFiddle http://jsfiddle.net/C9Kmx/32/

Answer 1

Bằng cách đọc bình luận của bạn về những giải pháp khác, nó là rõ ràng với tôi rằng chỉ có giải pháp cho bạn là để thực hiện một số JS vào mã của bạn. Tuy nhiên, đây không phải là vấn đề.

http://jsfiddle.net/b7TuP/

Answer 2

Cho position:fixed và height:100% cho div đúng. Điều này sẽ giải quyết vấn đề của bạn.

Answer 3

Thực hiện đúng div position:absolute; và đặt div cha position:relative; và sau đó height:100%; sẽ hoạt động cho div bên phải. Hãy chắc chắn rằng bạn cũng điều chỉnh vị trí x và chiều rộng của nó cho phù hợp. Trong ví dụ này tôi đã cho nó một left:50px để đảm bảo nó xuất hiện ở bên phải của cột bên trái.

JSFiddlehttp://jsfiddle.net/e9mvD/

Answer 4

Bạn có thể sử dụng giá trị table-cell của display sở hữu trong cách bố trí này và loại bỏ các float như thế này:

.left, .right{ 
    display:table-cell; 
} 

sống bản demo http://jsfiddle.net/C9Kmx/34/

Answer 5

Hãy thử bằng cách cho các chiều cao của vùng chứa có giá trị cố định

điều này cũng sẽ khắc phục sự cố. Chỉ cần thử nó trong jsFiddle

http://jsfiddle.net/C9Kmx/35/

.container 
{ 
    min-height: 10px; 
    width: auto; 
    height: 100px; 
    background-color: #eeeeee; 
} 

Answer 6

Bạn có thể thực hiện việc này bằng cách sử dụng flexbox và một số tính sáng tạo.

.container { 
 
    display: flex; 
 
    background: black; 
 
    padding: 5px; 
 
    width: 300px 
 
} 
 

 
.left { 
 
    height: 200px; 
 
    flex: 1 0 0px; 
 
    background: blue; 
 
} 
 

 
.right { 
 
    flex: 1 0 0px; 
 
    overflow: auto; 
 
    background: green; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 20%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="column"> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>