Hi all! I’m having an issue with seeing the height to 100%. I finally got the page to properly fill the height (what a struggle with the header haha) but now the Wordpress admin bar is sorta in the way? I don’t know if I’m just worrying about a non-issue, but I’d like to have the page not have a tiny bit of scroll when someone is logged in. Any help?
The top bar is usually a set height. MAybe adding some CSS to the section would fix the issue.
eg. IF the top bar is 30px, you could add the following CSS to thr main container.
%root% {
height: calc( 100dvh - 30px );
}
100dvh will be the full height of the device/screen and adjust if the device browser has customised top/bottom bars. By using calc, you can calculate the height to be reduced by 30px (or whatever the height of the top bar is).
Hope that helps.
Yeah that’s what I’m thinking I might have to do
but it’s even sillier because I’d have to check with JS if the dang thing is even there, so logged out users don’t see a gap at the bottom-- I was just hoping there was some kinda magic option I didn’t know about lol
Follow up question: 100% height works perfectly on the front end, but not in the editor. What could be causing that?
Regarding your first observation, the calc statement should still work as if the top bar is not there, it should treat it as a 0 so 100dvh - 0 would match the full screen height.
Regarding the 100% height scaling differently on the frontend/backend, percentage is based on the parent container not the screen. Possibly on the backend, there may be a different set or parent elements so that would change how 100% scales.
As an option, to vertically scale using the screen as the parent, use vh or dvh. This should give you more desirable results.
Hope that helps.