Firstly I'll apologise if I've missed this question being asked elsewhere on the forum or covered in the tutorials, I'm a complete CSS novice so it's possible I didn't search for the correct term!
I have been using the template here to make a simple site and whilst I have got my separate "pages" working fine I've come across the problem that each page has a fairly small amount of content. This means that when on the first of the pages (Portfolio in the template) you can see the top of the second page (About Me) at the bottom of the screen. In the code below I have taken the original template and removed two rows of images from the Portfolio page to demonstrate this.
Is there something I can do to the divs which define the "pages" which will make them fill the vertical space available in the situation where the div's content is short enough to allow the subsequent div to also show on screen?
Thanks!
(I may also have missed a way of collapsing this code so that it doesn't take up half the screen...in fact there may be a better way of posting a usable example!)