I am running into a problem on the tablet breakpoint (Chrome and Safari on iPadOS specially) where the viewport height is cropping content.
The viewport height seems to be calculated as the height the browser window when the search/tool bar is at its narrowest. This means when it is not collapsed, elements attached the to bottom edge of my page is getting clipped.
The “created on editor X” header is also throwing everything off, but disregard that as I am currently just testing the capabilities of the editor.
I would like to be able to have elements always visible on the bottom edge of the page, and after researching some CSS protocol it appears “window.innerHeight” is what I want my content height to be, but I’m hoping there is an easier way to remedy this without having to code anything.
I’m Shir from the Editor X team. Thanks for reaching out!
what you’d like to achieve? can you be more specific? Maybe we can help you get it in another way that doesn’t use a container of 100VH at a fixed, that will greatly help us understand more and assist you.
I use a vertical sidebar as a master, that contains menus and copyright info, rather than a header and a footer. I would like the content I place at the bottom of the sidebar to align with the bottom of the page and not move when you scroll.
Currently, without the “editor x” header my design intention works perfectly on a desktop monitor, and partially works on tablet.
The images I uploaded show how the content area on chrome on iOS changes in height as you scroll down, collapsing the URL and tab bar. There are two website heights in chrome (and safari) depending on if the URL bar is visible or not. However, the viewport height, as determined by Editor X, is a static number representing the height of the page with the URL bar collapsed. This means when the URL bar is visible, the viewport height is greater than the window height and content on the the bottom of the sidebar is clipped.
basically I want something to anchor to the bottom of the page, inside a sidebar master, and always stay in exactly the same place regardless of the URL bar is visible or not on a tablet browser.
