[英]Shopify Single Static Section Fill Page?
When using a single section in Shopify how can you grow the div to fill the whole screen?在 Shopify 中使用单个部分时,如何使 div 增长以填满整个屏幕?
I have modified the theme.scss file
and added a class我修改了theme.scss file
并添加了一个class
.hero--dsfull {
height: 100%;
}
Butt the section needs to FILL the window not just the div
it is in.对接部分需要填充 window 而不仅仅是它所在的div
。
See Example: https://bunc.bike/pages/test参见示例: https://bunc.bike/pages/test
Screenshot showing white space to be removed显示要删除的空白的屏幕截图
I came across a potential solution but I do not know how to implement it: Full height sections single page我遇到了一个潜在的解决方案,但我不知道如何实现它: 全高部分单页
If you want to that /pages/test
page only then do like this.如果你只想到那个/pages/test
页面,那么就这样做。
<div class="page-container {% if page.url == '/pages/test' %}full-height{% endif %}" id="PageContainer"></div>
Add below SCSS
code in your theme.scss.liquid
file在您的theme.scss.liquid
文件中添加以下SCSS
代码
.page-container{
&.full-height{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
}
OR或者
Add below code in template.liquid
or page.liquid
file.在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 %}
This solution for specific page
based on page.url
not for global/all-pages solution.此基于page.url
的特定page
解决方案不适用于全局/所有页面解决方案。
Hope this will help you!希望对你有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.