I'm brand new to site designer and just playing at the moment looking to potentially migrate and old style website into more modern layout etc.

So to keep things simple I want:

1) A header container (say 10% of page)
2) A footer container (say 10% of page)
3) The central container is 80% of page.

Is this central container scrollable in that when I add content that would exceed the 80% of page allocation then scroll bar will appear and the footer remain at the bottom of the page? OR - If not this then will the whole page be scrollable with the footer falling off the bottom of the current view till the bottom is reached?

It's up to you really but in this modern day & age especially for mobile devices we don't really (or shouldn't) use % to define heights any more
we can use either "vh" (viewport height)
"vmin" (viewport minimum height)
"vmax"(viewport maximum height

for most "vh" will suffice

First off then you need to ensure that the "Body" is set to
height = "auto" min = 100vh
header = height 10 vh
content container = 80 vh
footer = 10 vh

To keep the footer section at the bottom
you would set the footer to be
position - fixed
leave the margins as default
set the header width to 100%

There you have it
a page that scrolls if the content overflows the height of the content container, and the footer remains in view.

If you want to be really clever, then you can also set the header to
position = fixed top margin = o px .......... this now entails a little bit of additional work
1/ set the header width to 100%
2 set the content container top margin to = 10vh (this brings it back into full view

There you have now a page where the top & bottom (header & footer remain in view and the content section scrolls between them if the content overflows

I forgot to add that the header & footer need to be given a solid colour background ) doesn't matter what volour as long as it's a solid colour) and a z index of say 100, this then stops any images links etc (with a z index value less than 100) in the central column from being visible as it scrolls past the other two if you populate the centre container with anything that has a higher z index, then set the header/footer to something higher than whatever it is you may have

Wouldn't you also let the main container (content container) be 100vh? If it isn't fully populated, you risk a gap between it and the footer when scrolling down.

Not sure I follow that. On the ones I do before there hasn't been any noticeable gap

The only time I would do like that is if the centre content container had a different background colour to the body colour

There is another silent movie showing an example of a page set up as I described, on the way to youtube (still too early here for sound) will be a little while yet due to hardly any internet speed here at the moment
Keep watching for the update link

You will see it if you give the main container a background colour.

Unless I have misunderstood something...

as I said previously
"The only time I would do like that is if the centre content container had a different background colour to the body colour"

If in that case I would set the center containers
height= auto

and the


footer position = fixed
margin-bottom - 0vh

link to example video

https://youtu.be/LT-uNd3R9gI

next example with centre container different background colour

link to second example with center container different background colour (settings as described previously)

https://youtu.be/-NJHAzcPdSo