固定的div高度:滚动不满屏幕时在移动设备上为100％ [英] Fixed div height:100% on mobile devices when scrolling doesn't fill screen

问题描述

我有一个响应式 nav 元素. nav 是 position:fixed .单击时，它具有 top:0 bottom:0 (我也尝试过height:100％) left:0和right:0 .因此nav元素会覆盖整个屏幕.

I have a responsive nav element. The nav is position:fixed. When clicked it has top:0 bottom:0 (I've also tried height:100%) left:0 and right:0. Hence the nav element overlays the entire screen.

但是，如果我在移动设备上向下滚动，浏览器地址栏(iPhone上的Safari和Chrome)会变短或消失，从而使视口变高.但是nav元素的高度保持不变，这意味着它不再覆盖整个屏幕，并且底部有一个条带显示了后面的内容.

However on mobile devices if I scroll down, the browser address bar (Safari and Chrome on my iPhone) gets shorter or disappears all together - making the viewport higher. Yet the height of the nav element stays the same, meaning that it no longer covers the full screen and there is a strip at the bottom showing the content behind.

我该如何解决?(我也尝试过 height:100vh ).我不想使用JS或JQ.

How do I resolve this? (I've also tried height:100vh). I don't want to use JS or JQ.

谢谢

nav {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:black;
}


<nav>
    <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="workshops.html">Workshops</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

基本上，该元素的高度并未增加，无法响应较大的视口高度.元素高度保持不变，尽管浏览器地址栏消失了(在Chrome中)

Basically the element is not growing in height to respond to the larger viewport height. The elements height is staying the same, dispite the browser address bar disappearing (in Chrome)

推荐答案

您可以尝试将overscroll-behavior设置为不设置任何内容，有关更多信息，请参见此有用的文章: https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/

You can try setting overscroll-behavior to none in the body, more info can be found in this helpful article : https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/

这篇关于固定的div高度:滚动不满屏幕时在移动设备上为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！