Làm cách nào để biết một hàng bố cục flexbox sử dụng không gian dọc còn lại trong cửa sổ trình duyệt?
Tôi có bố cục flexbox 3 hàng. Hai hàng đầu tiên có chiều cao cố định, nhưng hàng thứ 3 là động và tôi muốn nó phát triển đến chiều cao đầy đủ của trình duyệt.
Tôi có một flexbox khác ở hàng-3 tạo ra một tập hợp các cột. Để điều chỉnh chính xác các phần tử trong các cột này, tôi cần chúng hiểu toàn bộ chiều cao của trình duyệt - đối với những thứ như màu nền và căn chỉnh mục ở cơ sở. Bố cục chính cuối cùng sẽ giống như sau:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>Tôi đã thử thêm một heightthuộc tính, thuộc tính này hoạt động khi tôi đặt nó thành số cứng nhưng không hoạt động khi tôi đặt nó thành 100%. Tôi hiểu height: 100%là không hoạt động, vì nội dung không lấp đầy cửa sổ trình duyệt, nhưng tôi có thể tái tạo ý tưởng bằng cách sử dụng bố cục flexbox không?