Horizon Template Set page height to current viewport height unless content over runs

Hi All,

Im using horizon template on my site - it is a single page scrolling site and I would like to set each page height to match the viewport-height so that when a user starts scrolling it immediately goes to the next page and so that you cannot see the page below if you click a nav link -

the problem is that, in the current version of the template, if you do not have either content or spacers that are larger than your current viewport then the next page down bleeds into he bottom of the page.

In order to work around this you have to use spacers and decide where you draw the line - the higher viewport resolution you target the more spacers you need which means when the site is viewed on mobile you have large empty paces below the content in each section because the spacers do not disappear on mobile.

If I was hand coding the site I would set the main div for each page to match the viewport height unless the content exceeds it. like so http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Problem is I dont know the ID's to target in squarespace ... anyone tried this before?

Thanks in advance.

Actually figured it out

div#home-section {
   min-height: 100vh;
}

div#about-us-section {
   min-height: 100vh;
}

div#whatwedo-section {
   min-height: 100vh;
}

div#partners-section {
   min-height: 100vh;
}

div#about-us-section {
   min-height: 100vh;
}

div#projects-section {
   min-height: 100vh;
}

div#prices-section {
   min-height: 100vh;
}

div#web-design-section {
   min-height: 100vh;
}

div#contact-us-section {
   min-height: 100vh;
}

@Tokolosh You can short...

div#home-section,  div#about-us-section, div#whatwedo-section {
    min-height: 100vh;
}

Do similar for all.

thanks for that @tuanphan very useful.