ARTICLE AD BOX
If you look at the HTML below you'll see I have the BODY, then a Container DIV containing Header, Wrapper, and FOOTER segments. Sadly in my case the Content wrapper does not see that the Footer is take up 4.5rems permanently and its available/scrollable are should top there.
I'm checking alignment options now but am at a loss to find a lever to pull so that the wrapper knows 100% is minus the Footer's 4.5rems.
If I set flex-wrap to wrap on the page-wrapper DIV then the contents disappear.
<body style="overflow: hidden; margin: 0;"> <div id="container-fluid" style=" display: flex; flex-direction: column; height: 100vh; max-height: 100vh; width: 100vw; min-height: 0px;"> <div id="fixedHeader" style=" display: flex; order: 1; width: 100%; height: 7.5rem; max-height: 7.5rem; align-items: center; flex-direction: row; flex-wrap: wrap;"> </div> <div id="page-wrapper" style=" display: flex; overflow: auto; max-height: 100%; min-height: auto; order: 2; width: 100%; flex: 1 0 auto;"> </div> <footer class="sticky-footer" id="_sticky-footer_ID_001" style=" display: flex; order: 3; height: 4.5rem; min-height: 4.5rem; flex-wrap: wrap; width: 100%; border-top: 1px solid #002f5f;"> </footer> </div> </body>