Doxygen; Customize header output file - css

Question

I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.

Answer 1

I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html