将多个 Flexbox 行的高度设置为始终在浏览器窗口中显示

Question

在 flexbox 中，我有三排盒子，每排都有不同的高度。三行的整体布局紧贴浏览器，因为最后一行和浏览器窗口底部之间永远不会有间隙。你可以在这里查看 Codepen 的完整内容https://codepen.io/heavymessing/pen/gBzvZX?editors=1100

到目前为止一切都很好，但我希望当浏览器窗口在大屏幕上缩小到 660 像素到高达 1300 像素的高度时，所有框都保持在视图中。

这样，如果查看者使用的是小型笔记本电脑或浏览器窗口高度较小，则无需向下滚动即可查看最后一行框。

1300px 高度 - 大屏幕视图

660px 高度 - 小屏幕视图

代码如下：

HTML

            <div class="container">
                <div class="row">

                <div class="col-6 block">
                    <img src="https://66.media.tumblr.com/1582e0296862c08406cf5e7ea974001e/tumblr_pf5y35U6NM1qep2npo1_1280.jpg" alt="kitchen">
                    <div class="block__title">
                    <h2>Block One</h2>
                    </div>
                </div>

                <div class="col-3 block">
                    <img src="https://66.media.tumblr.com/2fd7d1617312da89eb711e2248131241/tumblr_pf5y35U6NM1qep2npo3_1280.jpg" alt="bed">
                    <div class="block__title">
                    <h2>Block Two</h2>
                    </div>
                </div>

                <div class="col-3 block">
                    <img src="https://66.media.tumblr.com/15814546ba87b8eac4fcc726e8089b71/tumblr_pfbh9fbdT41qep2npo2_1280.jpg" alt="house">
                    <div class="block__title">
                    <h2>Block Three</h2>
                    </div>
                </div>

                <div class="col-6 block">
                    <img src="https://66.media.tumblr.com/b377f3ec456bc43475309237d4bd3a5e/tumblr_pfbh9fbdT41qep2npo8_1280.jpg" alt="kitchen">
                    <div class="block__title">
                    <h2>Block Four</h2>
                    </div>
                </div>

                <div class="col-6 block">
                    <img src="https://66.media.tumblr.com/a0cfff9bf1f88a247e0cd98d1c688458/tumblr_pfbh9fbdT41qep2npo10_1280.jpg" alt="kitchen">
                    <div class="block__title">
                    <h2>Block Five</h2>
                    </div>
                </div>

                <div class="col-3 block">
                    <div class="block__title">
                    <h3>Block Six</h3>
                    </div>
                </div>

                <div class="col-3 block">
                    <div class="block__title">
                    <h3>Block Seven</h3>
                    </div>
                </div>

                <div class="col-3 block">
                    <div class="block__title">
                    <h3>Block Eight</h3>
                    </div>
                </div>

                <div class="col-3 block">
                    <div class="block__title">
                    <h3>Block Nine</h3>
                    </div>
                </div>

                </div>
                <!-- /row -->
            </div>
            <!-- /container -->

SCSS

            * {
                box-sizing: border-box;
            }

            body {
                background-color: rgba(0, 0, 255, 0.1);
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                padding: 0;
                margin: 0;
            }

            .container {
                background-color: rgba(0, 255, 0, 0.1);
                width: calc(100% - 1rem);
                width: 100%;
            }

            $columns: 12;

            @for $i from 1 through $columns {
                .col-#{$i} {
                flex: 0 0 100% / $columns * $i;
                }
                .col-offset-#{$i} {
                margin-left: 100% / $columns * $i;
                }
            }

            .row {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;

                @media only screen and (min-width: 768px) {
                flex-direction: row;
                align-items: stretch;
                height: 100%;
                height: 100vh;
                }
            }

            .block {
                box-sizing: border-box;
                background-color: rgba(255, 0, 0, 0.1);
                border: 1px solid rgba(0, 0, 255, 0.1);
                text-align: center;
                min-height: 160px;
                padding: 0;
                position: relative;
                overflow: hidden;

                img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                }

                &__title {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: flex;
                padding: 0 10px 10px;
                text-align: center;
                color: white;
                background: rgba(0, 0, 0, 0.3);
                text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
                font-size: 24px;
                font-weight: bold;

                justify-content: center;
                align-items: flex-end;
                }
            }


            .block {
                // Height of first row
                &:nth-child(1), &:nth-child(2), &:nth-child(3)  {
                height: calc(100% - 64vh);
                }
                // Height of Second row
                &:nth-child(4), &:nth-child(5)  {
                height: calc(100% - 28vh);
                }
                // Height of Third row
                &:nth-child(6), &:nth-child(8), &:nth-child(9)  {
                height: calc(100% - 84vh);
                }
            }

Answer 1

您要做的第一件事是从.block 中删除min-height: 160px。

那么你想给你的.row一个高度calc(100vh - 65px)，而不是100vh（考虑菜单高度）。

之后，根据行正确更新单元格高度：

.block {

  /* General height: a quarter of 100vh - menu */
  height: calc((100vh - 65px)/4); 

  /* Height of Second row: half of 100vh - menu */
  &:nth-child(4), &:nth-child(5)  {
    height: calc((100vh - 65px)/2);
  }
}

看working。

如果您想在其他页面上重复使用它，其中高块不一定是第 4 和第 5，最佳做法是为其创建一个类。在示例中，我使用了1/2 类：

&.\31\/\32 {
  height: calc((100vh - 65px)/2);
}

显然，如果您不希望上述内容适用于某些屏幕尺寸，则应将其包装在适当的 @media 查询中。