使用 CSS 的移动浏览器上的 100% 高度 [英] 100% height on mobile browser using CSS

问题描述

我正在处理我的网站，我希望它在移动设备上看起来非常简单，基本上只有三个部分，每个部分都应该适合窗口的宽度和高度

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>

它在设备模式下在我的计算机浏览器上看起来很完美，但是当我在我的手机 (iPhone) 上打开它时，网址栏出现问题，随着我们向下滑动，网址栏会变小.在页面加载时，min-height 会适应浏览器高度，包括 bar，当 bar 改变它的尺寸时它不会改变.所以它不再适合屏幕.我试过这个:

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">

但是，显然，部分太高了.也许我可以在 jQuery 中做一些解决方法，但我宁愿不这样做.我希望 CSS 中有一些简单的解决方案.感谢您的时间.如果您想现场观看:http://kacpergalka.nazwa.pl/_portfolio

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. If you want to see it live: http://kacpergalka.nazwa.pl/_portfolio

推荐答案

您可以尝试在您的最小高度样式中使用 vh(视口高度)单位.

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

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

</section>

另一种选择是使用 calc().

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

</section>

这篇关于使用 CSS 的移动浏览器上的 100% 高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！