如何制作多個寬高比div來填充剩余的屏幕高度？

Question

我正在嘗試制作一個類似日歷的顯示器，以填充屏幕高度的剩余空間，但似乎無法實現這一點。

我的預期結果如下所示：

---------------> top of screen (bottom of browser's address bar -- also start of page)
<!-- some header content -->
<!-- the calendar is here and should be fully shown -->
---------------> bottom of screen
<!-- there're a few extra content here generated through ajax -->
---------------> bottom of page

我的代碼如下：

 .added-top { height: 150px; background-color: gold; } .outer-responsive { display: flex; flex-flow: column; height: 100%; } .outer-responsive .container { flex: 1 1 auto; blackground-color: blue; } .row-wrapper {} .ratio1_1 { width: 14%; /* 7 days in a week */ display: inline-block; float: left; border: 1px solid rgb(235, 235, 235); border-right: 0px; } .ratio1_1>.content { background-color: red; width: 99%; padding-top: 90%; /* 1:1 Aspect Ratio */ position: relative; /* If you want text inside of it */ } .ratio1_1 .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="added-top"> some previously added content </div> <div class="outer-responsive"> <div class="container"> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the content --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the content --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> </div> </div> 

這里也是一個的jsfiddle的什么我的代碼看起來到目前為止..我只是無法得到日歷根據屏幕高度響應。

Answer 1

如果可以的話，最好使用CSS Grid而不是Flexbox來獲得所需的布局，它更適合於二維布局。 這是實現它的方法：

為了使頂部內容和日歷視圖占據屏幕的整個高度，可以將它們包裝在一個元素中並將其高度設置為100vh ，該高度等於視口高度。

 body {margin: 0;} .wrapper { height: 100vh; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(4, 1fr); grid-gap: 2px; } .header { grid-column: 1 / 8; grid-row: 1; background-color: gold; } .day { background-color: red; } 

 <div class="wrapper"> <div class="header"> Some header content<br> More content </div> <div class="day">Sun</div> <div class="day">Mon</div> <div class="day">Tue</div> <div class="day">Wed</div> <div class="day">Thu</div> <div class="day">Fri</div> <div class="day">Sat</div> <div class="day">Sun</div> <div class="day">Mon</div> <div class="day">Tue</div> <div class="day">Wed</div> <div class="day">Thu</div> <div class="day">Fri</div> <div class="day">Sat</div> <div class="day">Sun</div> <div class="day">Mon</div> <div class="day">Tue</div> <div class="day">Wed</div> <div class="day">Thu</div> <div class="day">Fri</div> <div class="day">Sat</div> <div class="day">Sun</div> <div class="day">Mon</div> <div class="day">Tue</div> <div class="day">Wed</div> <div class="day">Thu</div> <div class="day">Fri</div> <div class="day">Sat</div> </div> Some extra content 

對於要在日歷視圖后顯示的內容，我不太確定。 這樣可以滿足您的需求嗎？

Answer 2

如果您不想使用CSS網格，則可以使用以下代碼：

  .added-top { height: 50px; background-color: gold; } .outer-responsive { height: calc(100vh - 50px); display:block; position: relative; } .row-wrapper { display: block; position: relative; height: 25%; font-size: 0; } .ratio1_1 { width: 14.2%; /* 7 days in a week */ height: 100%; display: inline-block; border: 1px solid rgb(235, 235, 235); border-right: 0px; box-sizing: border-box; } .ratio1_1 > .content { background-color: red; width: 100%; height: 100%; position: relative; /* If you want text inside of it */ } .ratio1_1 .text { position: absolute; font-size: 14px; top: 0; left: 0; bottom: 0; right: 0; } 

 <!DOCTYPE html> <html lang="en"> <head> <link style="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <?php echo put_headers(); ?> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="added-top"> some previously added content </div> <div class="outer-responsive"> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the content --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the content --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> <div class="row-wrapper"> <div class="ratio1_1"> <div class="content"> <div class="text">Sun</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Mon</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Tue</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Wed</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Thu</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Fri</div> <!-- If you want text inside the wrapper --> </div> </div> <div class="ratio1_1"> <div class="content"> <div class="text">Sat</div> <!-- If you want text inside the wrapper --> </div> </div> </div> </div> more contents </body>