Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix vh(viewport unit) css in mobile Safari?

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine)

html:

 <div id="facebox" style="top: 0px; left: 0px; display: block;"> 
       <div class="popup">    
             <div class="body"> 
                  <div class="content_light">
            <div class="Lcontent_left"></div>
                    <div class="Lcontent_right">
                    <div class="Lright_content"></div>
                    </div>
                  </div>
              </div>
       </div>
    </div>

This is my css:

#facebox .popup {
    display:block;
    position:relative;
margin:auto;
margin-top:0%;
  min-height:100vh;
  height:1px;
  border-radius:5px;
}

    #facebox .body {
  padding:0px;
  display:block;
  position:relative;
  background: #fff;
  width:100%;
  min-height:100vh;
  height:1px;
  margin:auto;
   border-radius:5px;
}
.Lcontent_left{
    position:relative;
    float:left;
    width:100%;
    height:50vh;
    /*min-height:250px;*/
    text-align:center;
    overflow:hidden;
    }
.Lcontent_left_fullscreen{
    display:none;
    }
.Lcontent_right{
    float:left;
    text-justify:inter-word;
    position:relative;
    width:100%;
    height:50vh;
    background-color:white;
    overflow:auto;
    font-family:"Open Sans",Helvetica,sans-serif;
    }
.Lright_content{
    position:relative;
    width:95%;
    margin:auto;
    margin-left:5px;
    overflow:auto;
    height:50vh;
    word-wrap:break-word;
    line-height: 1.5;
    font-size:16px;
    overflow:auto;
}
like image 294
Alvaro Avatar asked Apr 22 '14 14:04

Alvaro


People also ask

Why does 100vh not work on mobile?

On some mobile browsers, most commonly Chrome and Safari on iOS, 100vh actually refers to outerHeight. This means the lower toolbar on the browser will not be taken into account, cutting off the last couple of rems of your design.

Does 100vh work on mobile?

Yes, 100vh is 100% of a viewport height (your device), when pure 100% only fill all available parent area (parent block can have e.g. 50px height and it will fill only to this parent height).

How do I use 100vh CSS?

Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.


7 Answers

You can use jQuery in order to fix that.

$('container').height($(window).height()/2);

This works on every browser. Hope it helps.

like image 166
Koushik Das Avatar answered Oct 04 '22 18:10

Koushik Das


There's a pretty good answer to this across at CSS Tricks - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
// 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`);
like image 31
user2394342 Avatar answered Oct 03 '22 18:10

user2394342


I came across this fix today: https://github.com/rodneyrehm/viewport-units-buggyfill It checks every element for a vh/vw unit and turns it into px. Well worth checking out I think.

like image 26
Rembrand Avatar answered Sep 30 '22 18:09

Rembrand


I used this CSS only hax today and it worked. iOS 8.2 iPhone Safari :

html, body {
    ...
    width: -webkit-calc(100% - 0px);
    ...
}

Thought: Using calc seems to get Safari to convert units to px itself. Now my page is correctly full-bleed on Chrome and Safari on iOS.

like image 23
Cris Avatar answered Sep 30 '22 18:09

Cris


I also had this issue, here is my solution.

This is equals to height:100vh;

document.getElementById("your-element").style.height = window.innerHeight + 'px';

You can also use below code with jQuery,

$('your-element').height(window.innerHeight + 'px');

Checked with safari :)

like image 35
2 revs, 2 users 95% Avatar answered Oct 04 '22 18:10

2 revs, 2 users 95%


If you need a fullscreen div on mobile browsers, try using wrapper with fixed position and height set to 100%. Then set 100% height to your popup. You can adjust the position of the wrapper and popup in a way you like with top, left, right, bottom properties, as well as height and width.

These eliminates the problem with mobile browsers address bar autohiding in my case where I had to create a fullscreen popup on mobile chrome.

like image 23
vulp Avatar answered Oct 03 '22 18:10

vulp


I found this library very useful: https://github.com/Hiswe/vh-check

It will calculate the offset value for the correct vh, and put it in a css variable so you can use it in the css:

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}
like image 39
apptaro Avatar answered Sep 30 '22 18:09

apptaro