I hate pages like this where they use tricky layout. What they've done is use style rules to fix the page height to the visible viewport height (height:100%) and suppress the rest of the page (overflow:hidden). You can inject a little style rule hack to override this once you know the problem. I realize this isn't a convenient or universal solution, but maybe it will help from time to time.

While you have the page open:

(1) Open the Style Editor in the Developer Tools. Either:

• Shift+F7
• "3-bar" menu > Web Developer > Style Editor
• (menu bar) Tools > Web Developer > Style Editor

(2) At the upper left corner above the list of files, click the + button to create a new sheet

(3) In the blank editing area on the right, paste this rule that overrides overflow:hidden

html, body, div {
  overflow: visible !important;
}

Firefox should apply it within a few moments.

You can close the Developer Tools now, either by clicking the little X button at the right end of the Developer Tools toolbar, or by pressing Command+Alt+i or F12.

(4) Create your screenshot and in the preview, you should have the entire page

Note: this kind of "hack" is only in effect until you reload the page, so if something goes terribly wrong, and it wouldn't cause you to lose data, you can always reload.

Note that you can also use a JavaScript bookmarklet to toggle this style rule.

javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()

Thanks heaps for the fast response @jscher2000! Very handy trick. I wonder if the fullscreen screenshot function could overide 'overflow:hidden' somehow? Because seeing the overflow what doesn't fit on the screen is its best purpose. But this does the job for now thanks heaps!