how reserve height while display is none
if you can use visiblity hidden property instead of display:none you can achieve what you want.
When you do visibilty:hidden it just make the elements opacity to 0 while the element is still retaining its space.
Use visibility: hidden
instead of display: none
. Your element won't display, but its dimensions still apply and affect other elements because it's still a part of the page flow.
Instead of putting display: none;
on your div, put visibility: hidden;
. It will be invisible, but still take up space.