Create a specific page layout with Full-Screen image and sticky footer

I created a HTML structure which needs to be styled into a specific layout. For illustration I provide the following two URLs: Good layout: [login to view URL] Bad layout: [login to view URL] What I want --------------- I want a HTML/CSS page, using the following elements: 1) main content Main content comes from a CMS and may contain a lot of text and images. Styling of the content itself is not required. 2) fullscreen title image Title image must stretch to the full width of the browser window. The height may be cropped. The image must fill the entire browser window. The title image is present on some pages, but not on all. So the layout must allow the title image to be removed. 3) content footer Below the content is a footer, which moves along with the content, but stays at the bottom if little content is given. 4) toolbar A toolbar, which is fixed at the top of the screen and doesn't move with the content. 5) infobox An infobox, which is fixed on the bottom of the screen and doesn't move with the content. Please refer to the given URLs for demonstration. The problem ---------------- The problem with the given solution from my demo URLs is, that the content footer (3) does not stick to the bottom, when little content is given. This problem must be solved. The solution --------------- - I'd prefer a HTML/CSS only solution. - The solution must support responsiveness (brakepoints are not yet defined). - JavaScript should only be used, if there is absolutely no way of doing the layout with pure HTML/CSS.