Việc mở rộng #downcon để lấp đầy không gian còn lại của #containercó thể được thực hiện theo nhiều cách khác nhau tùy thuộc vào sự hỗ trợ của trình duyệt mà bạn muốn đạt được và có hay không #upcó chiều cao xác định.
Mẫu
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
Lưới
gridBố cục của CSS cung cấp một tùy chọn khác, mặc dù nó có thể không đơn giản như mô hình Flexbox. Tuy nhiên, nó chỉ yêu cầu tạo kiểu cho phần tử vùng chứa:
.container { display: grid; grid-template-rows: 100px }
Hàng grid-template-rowsxác định hàng đầu tiên có chiều cao cố định 100px và các hàng còn lại sẽ tự động kéo dài để lấp đầy không gian còn lại.
Tôi khá chắc chắn rằng IE11 yêu cầu -ms-tiền tố, vì vậy hãy đảm bảo xác thực chức năng trong các trình duyệt bạn muốn hỗ trợ.
Flexbox
Mô-đun Bố cục Hộp linh hoạt ( flexbox) của CSS3 hiện đã được hỗ trợ tốt và có thể rất dễ triển khai. Bởi vì nó linh hoạt, nó thậm chí hoạt động khi #upkhông có chiều cao xác định.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
Điều quan trọng cần lưu ý là hỗ trợ IE10 & IE11 cho một số thuộc tính flexbox có thể bị lỗi và IE9 trở xuống không có hỗ trợ nào cả.
Chiều cao tính toán
Một giải pháp dễ dàng khác là sử dụng đơn vị chức năng CSS3calc , như Alvaro đã chỉ ra trong câu trả lời của mình , nhưng nó yêu cầu chiều cao của con đầu tiên phải là một giá trị đã biết:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Nó được hỗ trợ khá rộng rãi, với các ngoại lệ đáng chú ý duy nhất là <= IE8 hoặc Safari 5 (không hỗ trợ) và IE9 (hỗ trợ một phần). Một số vấn đề khác bao gồm việc sử dụng calc kết hợp với biến đổi hoặc box-shadow , vì vậy hãy đảm bảo kiểm tra trong nhiều trình duyệt nếu bạn lo lắng.
Các lựa chọn thay thế khác
Nếu cần hỗ trợ cũ hơn, bạn có thể thêm height:100%;vào để #downlàm cho div màu hồng có chiều cao đầy đủ, với một lưu ý. Nó sẽ gây tràn cho thùng chứa, vì #upđang đẩy nó xuống.
Do đó, bạn có thể thêm overflow: hidden;vào vùng chứa để khắc phục điều đó.
Ngoài ra, nếu chiều cao của #upđược cố định, bạn có thể định vị nó hoàn toàn trong vùng chứa và thêm phần đệm vào #down.
Và, một tùy chọn khác sẽ là sử dụng màn hình bảng:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}