R
R
Roman Tatarinov2017-07-07 12:29:02
css
Roman Tatarinov, 2017-07-07 12:29:02

How to make friends height 100vh and chrome mobile?

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 the question

In order to leave comments, you need to log in

5 answer(s)
E
evtuhovdo, 2018-10-04
@romich

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

E
evorios, 2019-10-17
@evorios

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' }));

C
Conan the Barbarian, 2017-07-07
@JaredWinter

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 :)

M
Maxim Timofeev, 2017-07-07
@webinar

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?

N
Nikolai, 2021-04-19
@kolian89

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);
    }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question