Установите высоту нескольких строк 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

Первое, что вы хотите сделать, это удалить min-height: 160px из .block.

Затем вы хотите присвоить вашему .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);
  }
}

См. работает .

Если выЕсли вы хотите использовать это на других страницах, где верхние блоки не обязательно являются 4-м и 5-м, лучше всего создать класс для них.В этом примере я использовал 1/2 class:

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

Очевидно, что если вы не хотите, чтобы вышеприведенное применялось к какому-либо размеру экрана, вы должны заключить его в соответствующий запрос @media.