Shopify 单个静态部分填充页面？

【问题标题】：Shopify Single Static Section Fill Page?Shopify 单个静态部分填充页面？
【发布时间】：2020-04-28 02:54:03
【问题描述】：

在 Shopify 中使用单个部分时，如何将 div 扩大到填满整个屏幕？

我已经修改了theme.scss file并添加了一个类

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

对接部分需要填充窗口，而不仅仅是它所在的div。

参见示例：https://bunc.bike/pages/test

Screenshot showing white space to be removed

我遇到了一个潜在的解决方案，但我不知道如何实施： Full height sections single page

【问题讨论】：

你用的是什么主题？你的主题不是那个功能吗？

标签： html css twitter-bootstrap frontend

【解决方案1】：

如果您只想访问 /pages/test 页面，那么请这样做。

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

在theme.scss.liquid 文件中添加下面的SCSS 代码

.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 %}

此解决方案适用于基于 page.url 的特定 page，不适用于全局/所有页面解决方案。

希望对您有所帮助！

【讨论】：