Shopify Single Stati c Раздел Заполнить страницу?

Question

При использовании одного раздела в Shopify, как вы можете увеличить div, чтобы заполнить весь экран?

Я изменил theme.scss file и добавил класс

.hero--dsfull {
  height: 100%;
}

. раздел должен заполнить окно, а не только div, в котором оно находится.

См. пример: https://bunc.bike/pages/test

Снимок экрана, показывающий удаляемое пространство

Я столкнулся с потенциальным решением, но не знаю, как его реализовать: Разделы полной высоты на одной странице

Answer 1

Если вы хотите только эту страницу /pages/test, сделайте так.

<div class="page-container {% if page.url == '/pages/test' %}full-height{% endif %}" id="PageContainer"></div>

Добавьте ниже SCSS код в вашем theme.scss.liquid файле

.page-container{
    &.full-height{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
    }
}

ИЛИ

Добавить приведенный ниже код в template.liquid или page.liquid файле.

{% if page.url == '/pages/test' %}
<style type="text/css">
    .page-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
    }
</style>
{% endif %}

Это решение для указания c page на основе page.url не для Глобальное решение для всех страниц.

Надеюсь, это поможет вам!

Answer 2

Когда я использовал height:100vh для этого класса main-content js-focus-hidden, это сработало.

Не могли бы вы попробовать вот так?