title: 100% height on mobile browser using CSS
body: <p>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</p>
  <pre><code>&lt;section style=&quot;width: 100%; min-height: 100%&quot;&gt;
     
  &lt;/section&gt;
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;height=device-height&quot;&gt;
  </code></pre>
  <p>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.</p>