【问题标题】: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.liquidpage.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,不适用于全局/所有页面解决方案。

希望对您有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多