如何制作多个宽高比div来填充剩余的屏幕高度？

时间：2019-05-24 07:57:01

标签： html css

我正在尝试制作一个类似日历的显示器，以填充屏幕高度的剩余空间，但是我似乎无法实现这一目标。

我的预期结果如下：

---------------> 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。.我只是无法使日历根据屏幕高度进行响应。

2 个答案:

答案 0 :(得分：0)

如果可以的话，最好使用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

对于要在日历视图之后显示的内容，我不太确定。这样满足您的需求吗？

答案 1 :(得分：0)

如果您不想使用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>

相关问题
最新问题