100% height on mobile browser using CSS

Question

I'm working on my website and I want it to look really simple on mobile, basically there are just three sections, each one should fit window width and height

<section style="width: 100%; min-height: 100%">
   
</section>

It looks perfect on my computer browser in device mode, but when I open it on my mobile (iPhone), there is a problem with url bar, which gets smaller, as we slide down. On page load, min-height adapts to browser height including the bar, and it doesn't change when bar changes it's dimension. So it doesn't fit the screen anymore. I tried this:

<meta name="viewport" content="height=device-height">

But then, sections are to high, obviously. Probably I could do some workaround in jQuery, but I'd rather not. I hope there is some simple solutions in CSS. Thank you for your time.

On Safari mobile I believe the body has to be positioned relative to use height: 100%;, not sure though — Noel Widmer, Apr 17 '15 at 11:28

score 11 · Answer 1 · answered Feb 14 '20 at 16:14

This is not as easy as one may think.

Here are some extract from The trick to viewport units on mobile:

Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.

And then the solution propose:

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

And some JS:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

And some more JS:

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Aaron · Answer 2 · 2015-04-17T11:40:00.093

10

You could try the vh (viewport height) unit in your min-height style.

<section style="width: 100%; min-height: 100vh">

</section>

Another option would be to use calc().

<section style="width: 100%; height: calc(100%);">

</section>

edited Apr 17 '15 at 11:40

answered Apr 17 '15 at 11:28

Aaron

9,797
3
22
38

Actually it does on safari, but doesn't work on chrome. :( Thank's anyway, it's best solution so far, I've never used this unit before. – kacpergalka Apr 17 '15 at 11:42
Thank you, the second option worked. Never thought I'd try that one! – Ohiovr Feb 16 '18 at 12:09
1

calc(100%) works better on mobile bc it does not create v-scroll, different from min-height: 100vh, since mobile browsers adds a floating nav bar – Vagner Gon Jun 28 '21 at 10:01

score 2 · Answer 3 · answered Apr 17 '15 at 11:31

2

You may try this the scale meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

answered Apr 17 '15 at 11:31

dbd

145
5

1

I'm using it as well, I think it's required for every responsive page to work properly on mobile. But it doesn't help in this case. – kacpergalka Apr 17 '15 at 11:36
So...does it help or not in your case ? – dbd Apr 17 '15 at 11:37
Sorry, just a typo! It doesn't. :( – kacpergalka Apr 17 '15 at 11:41

score 0 · Answer 4 · answered May 02 '22 at 19:50

Here's a solution that worked for me:

Answer from: CSS3 100vh not constant in mobile browser

Not sure if it's good practice but it did work. Pretty much targeting the Body element and setting its position to fixed and height to 100%.

body { position: fixed; height: 100% }

I used it on my main element instead which is a direct child of body and it solved the height issue for me on Chrome, Safari, and DuckDuckGo mobile browsers.

100% height on mobile browser using CSS

4 Answers4

Linked