Fixed header/footer with centered content in screen and no scroll

Site URL: https://impala-falcon-5gh6.squarespace.com/

Hi! Please excuse me if I don't use the correct terminology, but...

I am trying to center and gallery section on a single page with a simple header/footer, just text. The content (in this case the gallery images) should scale to fit the vertical height of the browser window while always showing the header/footer (no scrolling).

My site is https://impala-falcon-5gh6.squarespace.com/ and the password is "1234", it's a WIP and for the moment I'm focused on achieving this before proceeding with the styling of type etc. and final images.

I have attached a jpg of what I am hoping to achieve. So that the gallery is vertically centred on the page and the header and footer and fixed to the top/bottom of the page and there is no scroll. I've searched the forums but haven't had much luck. 

If anybody has some advice it would be greatly appreciated, I realise this might involve some custom CSS.

xA

Nobody?

to disable scroll, add this to Home > Design > Custom CSS

.homepage::-webkit-scrollbar {
  display: none;
}
.homepage {
  -ms-overflow-style: none;
}

Thanks @tuanphan that's helping but I wondered if it was possible to fit header + slideshow + footer in the viewport at all times?

The site doesn't exist. Can you check again?

@tuanphan Hi! I am trying to do this exact same thing with the site studiogoetz.com.

The code you previously shared just locks the screen in the position it is in on any given browser. I want the header and footer to be static at the top and bottom of the page without needing to scroll, and the gallery in the center to resize based on browser. Is that possible? I'm using the Avenue template on 7.0. 

Thanks!

On 2/1/2022 at 3:45 AM, sg_squarespace said:

@tuanphan Hi! I am trying to do this exact same thing with the site studiogoetz.com.

The code you previously shared just locks the screen in the position it is in on any given browser. I want the header and footer to be static at the top and bottom of the page without needing to scroll, and the gallery in the center to resize based on browser. Is that possible? I'm using the Avenue template on 7.0. 

Thanks!

Hi. FOr homepage only or all pages?

All pages if possible!

Try adding to Design > Custom CSS

div#canvas {
    height: 100vh !important;
}

section#page {
    max-height: calc(100vh - 200px) !important;
    height: 100% !important;
    overflow: hidden;
}

footer#footer {
    height: 100px !important;
}

html, body {
    overflow: hidden;
}

tried it! for some reason that code is hiding all of my page content...