Làm cho div con mất tối đa chiều cao

Question

Tôi đang cố gắng để làm cho .box-contentdiv lấy chiều cao tối đa còn lại bên trong hộpA/boxB div. Tôi có một số div.box-header và một số .box-content bên trong hộpA/boxB div. .box-content đang chia sẻ div với .box-header.

Trong số JSFiddle này, bạn có thể thấy rằng .box-content đang ở bên ngoài đó là số div.

Làm thế nào tôi có thể giải quyết việc này với CSS tinh khiết dùng trong tài khoản với 2 nguyên tắc sau đây:

1. Chiều cao của .box-content được căng ra (tăng/giảm bất cứ khi nào thay đổi kích thước cửa sổ);
2. .box-content có chiều cao tối thiểu là 200px;

Answer 1

nếu overflow là một lựa chọn (mà tôi cảm thấy làm cho cuộc sống của bạn dễ dàng ở đây), đây là một demo

Giữ HTML tương tự, bạn css (thay đổi 2 line) dưới đây

.boxA { 
    width: 220px; 
    padding: 0px 3px 5px 5px; 
    float: left; 
    height: 100%; 
    margin-bottom: 0px; 
    border: solid 1px green; 
    overflow:hidden; /*added this*/ 
} 

.boxB { 
    width: 420px; 
    padding: 0px 5px 5px 3px; 
    float: right; 
    height: 100%; 
    border: solid 1px red; 
    overflow:hidden;/*added this*/ 
} 

Answer 2

Vấn đề bạn đang phải đối mặt là:

.box-content được thiết lập đến 100% của nó là mẹ nhưng đó cũng là .box-header đó là bên phụ huynh nên .box-content được đẩy xuống và có tràn (kích thước của .box-content) để giữ 100% chiều cao của phụ huynh.

Tôi có thể đề nghị css này:

.box-content { height: 90%; } 

.box-header { 
    position: relative; 
    background-color: green; 
    padding:11px 8px 5px; 
    color: white; 
    height:10%; 
} 

Xem này FIDDLE

Answer 3

Bạn có thể thiết lập các div cha mẹ để được cuộn trong trường hợp các div con có chiều cao lớn hơn.

.boxA{ overflow:auto; } .boxB{ overflow:auto; }