Geek Answers Handbook

100% height in mobile browser using CSS

I am working on my site and I want it to look very simple on a mobile phone, basically there are only three sections, each of which should correspond to the width and height of the window

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

It looks great on my computer browser in device mode, but when I open it on my mobile device (iPhone), there is a problem with the url bar, which becomes smaller when we move down. When loading a page, the minimum height adapts to the height of the browser, including the panel, and it does not change when the bar changes its size. So it is no longer suitable for the screen. I tried this:

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

But then, of course, the sections should be high. I could probably do some workaround in jQuery, but I would prefer. Hopefully there are some simple solutions in CSS. Thank you for your time. If you want to see it live: http://kacpergalka.nazwa.pl/_portfolio

+5
source share
2 answers

You can try the vh block (viewport height) in the minimum height style.

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

Another option is to use calc() .

 <section style="width: 100%; height: calc(100%);"> </section>
+8
source

You can try this scale meta tag:

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

More articles:


All Articles