How to make friends height 100vh and chrome mobile?

Question

css

The crux of the problem is that mobile chrome renders a height of 100vh given the height of the browser's navbar. Naturally, it turns out that any picture, slider, etc. that has a height of 100vh is cut off. I googled and didn't google anything.. How to solve this problem?

Answer 1

Here is a super solution https://css-tricks.com/the-trick-to-viewport-units...

Answer 2

For myself, I solved this problem in this way:

body {
  margin: 0;
  overflow: hidden;
}

body > .scroll-box {
    position: relative;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

Thus scrolling of the page is blocked, therefore the navigation bar will always be visible. And also 1vh will be constant. Scrolling appears if the content does not fit vertically inside the .scroll-box container. Scrolling the container will not affect the dimensions of the body in any way . All lightboxes, modals and slide-out menus are placed in the body so that the appearance of scrolling does not affect the layout of these windows in any way.
PS. To block the parasitic scrolling of the main container while scrolling the modal, I added in JS:

$modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
$modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));

Answer 3

The only way to solve it is by subtracting the height of the navbar from the height of 100vh.
The method is not 100%, because The height of the navigation for different devices may differ, but not drastically. I didn't find any other solution :)

Answer 4

mobile chrome render height 100vh given browser navbar height

not only chrome
Height 100vh on mobile?
Issues with height: 100vh on mobile. How to decide?
Why does height: 100vh work crookedly for Chrome, Yandex, Mozilla mobile browsers?

Answer 5

Someone will need a solution to the height 100vh problem

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', '${window.innerHeight}px')
}
window.addEventListener('resize', appHeight)
appHeight()

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}