how to position content below fixed top elements?

[matochondrion]

Hi,

I have a fixed header and would like the slidebar to appear from the top direction, but position below the header.

If I don't include some sort of spacing mechanism (div with a set height, padding-top, etc), the page content is positioned at the top of the page with the header layered overed it.

When I add a spacer to move the page content down, and open the slidebar, there is empty space between the slidebar and the page content.

I'm wondering if there's a cleaner way to do this so the page content top, is flush with the bottom of the slidebar?

Page content hidden without a spacer

Page content visible with a spacer

empty spacer area visible when slidebar expands