Currently my layouts.html file in my project has a header, a sidenav, and a {{yield}} field. I am trying to position whatever gets displayed in yield so that it’s below the header and next to the sidebar, basically filling the rest of the space on the page. However, it seems that no matter how I try to place the {{yield}} in a different div within the layout.html file, all three pieces end up at the same level, so I’m having trouble getting the yield to simply fill the remaining space.
What would be the best way to go about doing this?
<template name="layout">
{{> header}}
{{> sideNav}}
{{> yield}}
</template>
This is what I have, and the header and sidenav are neatly filling their own respective positions. Essentially I just want whatever goes in yield to be in a space that fills the rest of the page, and doesn’t touch the header or sidenav.
I’ve tried placing the yield field in a div with a CSS class with absolute positioning and top, right, bottom, left all at 0, but of course this just fills the entire page because it’s not seeing the yield as “within” the header and sidenav elements.