Question 11475 in Shopify Question posted in
The Shopify help center can be found here.

Fill screen with div – Shopify

How can I get my site to look like this? Where the first section fills the whole screen, then when you scroll down ANOTHER section fills the whole screen. https://pharmacy.cargo.site/ enter image description here

I tried doing a width/height 100%, but no luck. I tried styling an entire div with a background color, also no luck.

Tags:

3

Answers


  1. 0

    If you view the page source on the "Nested Scrollers" link below you can see the implementation of vh as mentioned by wouch.

            .screen {
            height: 100vh;
            width: 100%;
            position: relative;
            min-height: 900px;

    They are also using scrollMonitor library, which can be found here: https://github.com/stutrek/scrollmonitor

    See their demo for Nested Scrollers. Your are not interested in the nested scrollers themselves, but the three sections that contain them.

    Login or Signup to reply.
  2. 0

    User @Leland pointed out dvh and indeed, it seems to work just fine – thanks for pointing that out. It was always annoying to work with vh.
    Last time I checked this feature, it was not supported enough (see bug report for Safari 15.6 https://caniuse.com/?search=Small%2C%20Large%2C%20and%20Dynamic%20viewport%20units. Now it seems to be fine – unless you need to support IE11.

    html,
body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-flow: column nowrap;
}

.section {
  height: 100dvh;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.section h3 {
  font-size: 64px;
}

.section-a {
  background-color: wheat;
}

.section-b {
  background-color: silver;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <section class="section section-a">
      <h3>A</h3>
    </section>
    <section class="section section-b">
      <h3>B</h3>
    </section>
  </div>
</body>

</html>
    Login or Signup to reply.
  3. 0

    For a full view scroll construction you need to:

    • make sure that html and body consume the full viewport space available
    • create a scroll container that fills that space and overflows to get a scrollbar (.scroll-container)
    • create scroll container child elements that fill the parent (.scroll-container > section)

    Optionally you can introduce CSS Scroll Snap for full container scrolling (read ‘full page’ in your case).

    snippet

    /***************************/
/* a few preferred globals */
/***************************/
* { box-sizing: border-box }
body,h1,h3 { margin: 0 } /* remove default HTML spacing */

/********/
/* DEMO */
/********/
/* Fill full viewport widht and height */
html, body { width: 100%; height: 100% }

.scroll-container {
    /* full screen scroll container */
    width : 100%;  /* full available width */
    height: 100vh; /* DEMO full viewport height */
    /* for scroll snap any 'height' is [MANDATORY] */

    /* [MANDATORY] for scroll snap */
    overflow-y: scroll;
    scroll-snap-type: y proximity; /* or 'mandatory' */
}

/* Generic content sections */
.scroll-container > section {
    /* Fill full scroll container  */
    width: 100%; height: 100%;
    padding: 1rem;

    /* [MANDATORY] for scroll snap */
    scroll-snap-align: start;
}

/* Specific section colors */
.one    { background-color: #eeeadf }
.two    { background-color: #c3d4c4 }
.three  { background-color: #d4c3d3 }

/*******************/
/* Extra eye-candy */
/*******************/
/* Fixed footer demo */
.fixed  {
    position: fixed;
    bottom: 0; left: 0;
    right: 17px; /* avoid overlaying scrollbar */
    background-color: hsl(0,0%,0%,.05);
    padding: 1rem 2rem;
}
.fixed h3 { text-align: right }
    <div class="scroll-container">
    <section class="one"  ><h1>section one  </h1></section>
    <section class="two"  ><h1>section two  </h1></section>
    <section class="three"><h1>section three</h1></section>
 </div>
 <footer class="fixed"><h3>fixed footer</h3></footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search