I’m not sure that you are going for the best way.
You are still creating the element in the dom, even if you display: none; them.
Why don’t you change the twig file to remove the header and the footer ?
I’d inspect the page in your browser’s development tools. In both Firefox and Chrome at least, you can hower with the mouse over elements to see what space they occupy and check which styles are active.
Btw, there is a full page plugin. Maybe you want something like this?