html – 使用CSS在移动浏览器上的100％高度
发布时间：2020-12-14 22:34:59 所属栏目：资源 来源：网络整理
导读：我正在我的网站上工作,我希望它在移动设备上看起来非常简单,基本上只有三个部分,每个部分应该适合窗口宽度和高度 section style="width: 100%; min-height: 100%"/section 它在我的计算机浏览器设备模式下看起来很完美,但是当我在我的手机(iPhone)上打开它时
|
我正在我的网站上工作,我希望它在移动设备上看起来非常简单,基本上只有三个部分,每个部分应该适合窗口宽度和高度
<section style="width: 100%; min-height: 100%"> </section> 它在我的计算机浏览器设备模式下看起来很完美,但是当我在我的手机(iPhone)上打开它时,url bar出现问题,随着我们向下滑动,它会变小.在页面加载时,最小高度适应浏览器高度(包括条形),当条形更改其尺寸时,它不会更改.所以它不再适合屏幕了.我试过这个： <meta name="viewport" content="height=device-height"> 但是,显然,部分很高.可能我可以在jQuery中做一些解决方法,但我宁愿不这样做.我希望CSS中有一些简单的解决方案. 解决方法
您可以在最小高度样式中尝试vh(视口高度)单位.
<section style="width: 100%; min-height: 100vh"> </section> 另一种选择是使用calc(). <section style="width: 100%; height: calc(100%);"> </section> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |