Html 列不跨越行的高度-引导

首先，我第一眼就知道这看起来像是一个被问了很多次的问题。我已经为此奋斗了好几天，所以觉得值得一问。我正在尝试创建一个家庭智能日历，作为从.net到.net核心的学习体验

这是与之配套的基本布局和css：

<div class="container-fluid Calendar">
    <header>
        <h4 class="display-4 mb-4 text-center">@Model.Calendar.FormattedDateTitle</h4>
        <div class="row d-none d-sm-flex p-1 bg-dark text-white">
            <h5 class="col-sm p-1 text-center">Monday</h5>
            <h5 class="col-sm p-1 text-center">Tuesday</h5>
            <h5 class="col-sm p-1 text-center">Wednesday</h5>
            <h5 class="col-sm p-1 text-center">Thursday</h5>
            <h5 class="col-sm p-1 text-center">Friday</h5>
            <h5 class="col-sm p-1 text-center">Saturday</h5>
            <h5 class="col-sm p-1 text-center">Sunday</h5>
        </div>
    </header>
 
    <div class="row dayContainer">

        @for (int days = 1; days < Model.Calendar.StartingDay; days++)
        {
            <div class="col-sm p-2 border border-left-0 border-top-0 text-truncate d-none d-sm-inline-block text-muted day">
                <h5 class="row align-items-center">
                    <span class="date col-1"> </span>
                </h5>
                <p class="d-sm-none">No events</p>
            </div>
        }
        

        <div style="height: 10px; background: purple; width: 100%; padding: 0%"></div>

        @for (int days = 1; days < Model.Calendar.StartingDay; days++)
        {
            <div class="col-sm p-2 border border-left-0 border-top-0 text-truncate d-none d-sm-inline-block text-muted day">
                <h5 class="row align-items-center">
                    <span class="date col-1"> </span>
                </h5>
                <p class="d-sm-none">No events</p>
            </div>
        }

        <div style="height: 10px; background: purple; width: 100%"></div>

        @for (int days = 1; days < Model.Calendar.StartingDay; days++)
        {
            <div class="col-sm p-2 border border-left-0 border-top-0 text-truncate d-none d-sm-inline-block text-muted day">
                <h5 class="row align-items-center">
                    <span class="date col-1"> </span>
                </h5>
                <p class="d-sm-none">No events</p>
            </div>
        }
</div>

这给我留下了：

请原谅这些花哨的颜色，但这让我更容易弄清楚到底发生了什么。我的问题是，当我将日历的跨度设置为屏幕的高度时，内部的“day”div并没有填充高度。所以我留下了这些巨大的差距。理想情况下，我希望所有的行都是完全相同的高度，只要窗口的高度降低，行就会变短

看起来柱没有跨越格线的高度。因为你不会看到任何绿色区域。但由于某种原因，我不能让它发生。我简化了html代码以帮助测试

---

谢谢

您可以添加一个JSFIDLE或至少一个可以看到bug的捕获吗？我想你可以用

.dayContainer

中的

display:flex

和

flex-direction:column

修复它，但不能测试它。

html {
    overflow: hidden;
    min-height: 100vh; /* make sure it is at least as tall as the viewport */
    position: relative;
}

body {
    background-color: rgb(46, 52, 57);
    background-repeat: repeat;
    font-family: 'Source Sans Pro', sans-serif;
    height: 100vh; /* force the BODY element to match the height of the HTML element */
}


.Today {
    width: 90%;
    height: 100vh;
}

.Calendar {
    width: 90%;
    height: 100vh;
    padding-bottom: 10%;
    overflow: hidden;
    background-color: #f8f9fa;
}

.dayContainer {
    height: 100%;
    background: green;
}

.day {
    background-color: yellow;
    height: auto;
}