html - Fill screen with div

Question

149 votes

2 answers

html - Fill screen with div

Solution:

For a full view scroll construction you need to:

make sure thathtml andbody 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 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts) 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>

Undefined asked

2023-03-16

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Undefined answered · Answer 1 · 2023-03-16

Answer

Solution:

If you view the page source on the "Nested Scrollers" link below you can see the implementation ofvh 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 (https://github.com/stutrek/scrollmonitor)

See their demo for Nested Scrollers (http://stutrek.github.io/scrollmonitor/demos/divInADiv.html). Your are not interested in the nested scrollers themselves, but the three sections that contain them.

Undefined answered · Answer 2 · 2023-03-16

Answer

Solution:

User @Leland pointed outdvh and indeed, it seems to work just fine - thanks for pointing that out. It was always annoying to work withvh. 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 (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>

Undefined answered

2023-03-16

Link to answer

Source

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

html - Fill screen with div

Solution:

Answer

Solution:

Answer

Solution:

Didn't find the answer?

Similar questions

Write quick answer