panel between page header and footer

panel between page header and footer

Is there a clean way to render a panel between the page header and footer? I'm working on an application that requires the window to be (vertically) split in half and the panel widget seems to be perfect just for that. But panels are always rendered on top of the header or the footer but this gives the user the feeling that the content of the page doesn't really belong to the scope between the header and footer.

I made a jsfiddle for people who know how to change behaviour of the panel.