首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
宝塔
V2EX  ›  程序员

使用 height: 100vh 时在安卓 Chrome 上会多出一截,这种情况不用 js 怎么解决?

  •  
  •   Danswerme · 26 天前 · 1051 次点击

    类似的问题: https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile

    代码大概是这样:

    .banner {
        height: 100vh;
    }
    
    main {
        height: 6000px;
    }
    
    <body>
        <div class="banner"></div>
        <main></main>
    </body>
    
    

    安卓 Chrome 将地址栏也计算进了屏幕高度里,导致 banner 有一部分滚动到屏幕下方去了,并不能正好占满屏幕。

    因为 banner 下面还有一个 main,所以没法用 100%高度了,请教大家这种情况能用 css 解决吗?

    14 回复  |  直到 2019-10-23 02:08:31 +08:00
        1
    SP00F   26 天前
    html, body 100%
    .wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; }
    .banner { flex: 1; }
    .main { height: 6000px; }

    这样的话。。。需要让 wrapper 支持滚动,把 body 禁止滚动 overflow: hidden;
    可以尝试一下。
        2
    Danswerme   26 天前 via Android
        3
    Danswerme   26 天前 via Android
    @SP00F 我试了一下,main 一旦出现之后 banner 的 flex: 1 就失效了,直接被挤没了。
        4
    SP00F   26 天前
    @Danswerme #3

    好像是 flex 会被挤掉。。根据当前可视正文区域显示的。。

    你如果滚动的话,父级用 relative 子级 banner 用 absolute。在区域里是可以滚动的
        5
    crysislinux   26 天前
    我来看看有解决办法没,要支持移动端我都用 100%。
        6
    Danswerme   26 天前 via Android
    @SP00F 但是如果 banner 用了绝对定位,下面的 main 不也得来个定位或者 margin 之类的?这样一来又涉及到获取屏幕高度了..
        7
    Danswerme   26 天前 via Android
    @crysislinux 麻烦大佬了
        8
    godoway   26 天前 via Android
    网站用的 https 并且证书是安全的情况,chrome 的 toolbar 随着网页滚动隐藏后你就会发现多出的那截东西就没了。
        9
    love   26 天前 via Android
    印象中 position fixed 可破
        10
    Danswerme   26 天前 via Android
    @godoway https://sariay.github.io/

    你看看这个博客,https 证书有效的。
    banner 也是用了 100vh,到了安卓 chrome 就不能刚好占满全屏了。
        11
    Danswerme   26 天前 via Android
    @love 你是说 banner 使用 fixed ? banner fixed 之后 main 部分怎么处理呢?
        12
    godoway   26 天前 via Android
    @Danswerme
    <meta name="mobile-web-app-capable" content="yes">
    不知道这个有没有效
        13
    felixin   26 天前 via Android
    如果是 react 可以用 react-div-100vh
        14
    molvqingtai   26 天前 via Android
    我是通过 js 动态设置为 innerHeight
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4126 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 05:55 · PVG 13:55 · LAX 21:55 · JFK 00:55
    ♥ Do have faith in what you're doing.