The issue isn’t vh units but min-height I found a semi-working CSS-only solution: min-height: 100vh; height: 100px; The extra height will enable IE to fill the screen vertically even if the content is not tall enough. The drawback is that IE will no longer wrap the content if it’s longer than the viewport. Since this … Read more
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 … Read more
I was able to fix the error in React SASS using the calc function. font-size: calc(max(8vw, 30px));
use both CSS vh and jQuery, it’s safer. jQuery example: var clientHeight = $( window ).height(); $(‘.element’).css(‘height’, clientHeight); and CSS: .element {height: 100vh;}
Before I answer this, I’d like to point out that Chrome and IE 10+ actually supports calc with viewport units. FIDDLE (In IE10+) Solution (for other browsers): box-sizing 1) Start of by setting your height as 100vh. 2) With box-sizing set to border-box – add a padding-top of 75vw. This means that the padding will … Read more
font-size: 3vw; means that the font size will be 3% of the viewport width. So when the viewport width is 1200px – the font size will be 3% * 1200px = 36px. So a max-font-size of 36px can be easily implemented using a single media query to override the default 3vw font-size value. Codepen demo … Read more
One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do: body { width: calc(100vw – (100vw – 100%)); } You get the 100vw minus the width of the scrollbar. You can do this with height as well, if you want a square … Read more
100% can be 100% of the height of anything. For example, if I have a parent div that’s 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though … Read more
Unfortunately this is intentional… This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug: This is completely intentional. It took quite a bit of work on our part to achieve this effect. 🙂 The base problem is this: the … Read more