时间戳

首页 > 解决方案 > 当 URL 栏在滚动时调整大小时，灰色栏与 Chrome Mobile 上的 UI 重叠？

css - 当 URL 栏在滚动时调整大小时，灰色栏与 Chrome Mobile 上的 UI 重叠？

问题描述

我正在我的网站的移动版本上实现一个类似应用程序的底部导航栏。我遇到了滚动时灰色条与底部导航栏重叠的问题。我认为这是由于 URL 栏滚动出视图时窗口调整大小所致。 打嗝的时候是这样的。

关于如何将底部导航固定在窗口底部的任何想法，即使由于 URL 栏隐藏而正在调整大小？

这是底部导航元素和页脚中每个链接的 CSS：

.footer {
    -webkit-box-align: center;
    align-items: center;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: darkgrey;
    background-color: white;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 2000;
}
.footerLink {
    -webkit-box-align: center;
    align-items: center;
    color: darkgrey;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    font-size: .9rem;
    line-height: 1;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 4rem;
    height: 4.0rem;
    border-radius: 2px;
    text-decoration: none;
}

这是 React 元素的 Javascript：

const BottomNav = (props) => {
    return (
        <div className={headerStyles.footer} >
            <Link className={styleFooter('/')}
                to='/'
            >
                <Icon size='large' style={{ margin: '3px' }} name='home' />Home</Link>

            <Link
                className={styleFooter('/exclusive-dining')}
                to='/exclusive-dining'
            >
                <Icon size='large' name='food' />Packages</Link>
            <Link
                className={styleFooter('/happy-hour-finder')}
                to='/happy-hour-finder'
            >
                <Icon size='large' name='glass martini' />
                Happy Hours</Link>
            <Link
                className={styleFooter('/articles')}
                to='/articles'
            >
                <Icon size='large' name='newspaper' />Articles</Link>
            <Link
                className={styleFooter('/app/profile')}
                to='/app/profile'
            >
                <Icon size='large' name='user' />Profile</Link>
        </div >
    )
}

export default BottomNav;

标签： cssreactjsgatsby

解决方案

好的，我想通了。在我的全局 CSS 中，我意识到在 html 标记上将溢出设置为隐藏，如下所示：

html {
  box-sizing: border-box;
  overflow: hidden;
}

这导致额外的屏幕空间在调整内部窗口大小时显示为空白。删除此代码解决了该问题。

推荐阅读