html - 如何制作多个纵横比 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 来实现所需的布局，它更适合二维布局。以下是您可以如何实现它:

为了让顶部内容和日历 View 占据整个屏幕的高度，您可以将它们包裹在一个元素中并将其高度设置为 100vh，这等于视口(viewport)高度。

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

我不太确定你想在日历 View 后显示的内容。这是否满足您的需求？