带Bootstrap 4表的全高日历

Question

我正在尝试使用Bootstrap 4有边框的表格创建日历，该表格占用100%的vh，每行具有相同的宽度，但标题(包含一周中的日期)具有不同的高度。https://codepen.io/GeoHurdle/pen/ZEpyzLZ

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr class="d-flex">
        <th scope="col" class="col-3">Sun</th>
        <th scope="col" class="col-3">Mon</th>
        <th scope="col" class="col-3">Tue</th>
        <th scope="col" class="col-3">Wed</th>
        <th scope="col" class="col-3">Thu</th>
        <th scope="col" class="col-3">Fri</th>
        <th scope="col" class="col-3">Sat</th>
      </tr>
    </thead>
    <tbody>
      <tr class="d-flex">
        <td class="col-3" scope="row">1</td>
        <td class="col-3">2</td>
        <td class="col-3">3</td>
        <td class="col-3">4</td>
        <td class="col-3">5</td>
        <td class="col-3">6</td>
        <td class="col-3">7</td>
      </tr>
      <tr class="d-flex">
        <td class="col-3" scope="row">8</td>
        <td class="col-3">9</td>
        <td class="col-3">10</td>
        <td class="col-3">11</td>
        <td class="col-3">12</td>
        <td class="col-3">13</td>
        <td class="col-3">14</td>
      </tr>
    </tbody>
  </table>
</div>

html,
body {
  overflow-y: hidden;
}

.table [class^='col-'] {
  flex-shrink: 1;
}

tr {
  height: calc(100vh / 3);
}

Answer 1

如果使用网格布局而不是表格，则可以更轻松地完成此操作

html, body {
        height: 100%;
        margin: 0;
        }
        .wrapper {
        border: 1px solid blue;
        height: 100%;
        padding: 10px;
        }

        .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        grid-template-rows: 50px auto auto;
        row-gap: 7px;
        }

        .grid>div {
        width: 100%;
        height: 100%;
        border: 1px solid;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

<div class="wrapper">
        <div class="grid">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            
        </div>
    </div>

​

Answer 2

在why not use tables for layout in HTML上已经有了讨论。如果您必须使用Bootstrap表来构建日历，那么您可以忽略我的回答，或者直接删除它。

如果你想知道如何在flexbox中做到这一点，请继续阅读。

结构

仅通过查看您的源代码，我就可以看出您的日历中有3个主要部分。因此，我将首先像下面这样构造它们：

<section class="calendar">
    <section class="month-selection">
        <a href="#">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="month">DECEMBER</div>
        <a href="#">
            <i class="fas fa-arrow-right"></i>
        </a>
    </section>
    <section class="days-of-week">
        <div class="day-of-week">Sunday</div>
        ...
    </section>
    <section class="days">
        <div class="day">1</div>
        ...
    </section>
</section>

您的要求之一是您希望日历占据100%的视图高度。

通过CSS/SCSS并不难做到：

.calendar {
    height: 100vh;
}

我猜棘手的部分是如何让days部分的days自动填充空白，同时不设置month-selection和days-of-week部分的固定高度。

我的诀窍是我的日历显示为flexbox，我将它的flow设置为column，我只将days部分的高度设置为100%。是的，days区段会尝试将自身高度设置为100%的HTML body，但由于它是flexbox的子项，它会缩小(默认情况下)，只占用可用的空间！(如果流为列很难想象，请考虑行流)

.calendar {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    .days {
        height: 100%;
    }
}

只要days部分占用了剩余的可用空间，以后当我们设计每一天的样式时，我们就能够自动调整它们的高度！

每天的高度

另一个问题是如何自动调整days部分中每天框的高度，以便它们将占据其余的空间。

不管你信不信，使用flexbox非常简单！

除了将days部分设置为flexbox之外，您唯一需要做的就是将align-items设置为stretch (这甚至是默认设置)！

.days {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;

    ...
}

屏幕截图

​

​

演示： https://jsfiddle.net/davidliang2008/uc4stzp5/107/