带 Bootstrap 4 表的全高日历

Question

我正在尝试使用占用 100%vh 的 Bootstrap 4 边框表创建一个日历，每行具有相同的宽度但标题的高度不同（其中包含星期几）。 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 部分中的日子自动填补空白，而不是在month-selection 和days-of-week 部分设置固定高度。

我的技巧是我将日历显示为 flexbox，并将其流设置为列，并且我只将 days 部分的高度设置为 100%。是的，days 部分会尝试将自身高度设置为 HTML 正文的 100%，但由于它是 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/