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

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

  •  
  •   Danswerme · 2019-10-22 21:14:37 +08:00 · 3422 次点击
    这是一个创建于 1848 天前的主题,其中的信息可能已经有所发展或是发生改变。

    类似的问题: 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
    SP00F
        1
    SP00F  
       2019-10-22 21:21:50 +08:00
    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;
    可以尝试一下。
    Danswerme
        2
    Danswerme  
    OP
       2019-10-22 21:22:04 +08:00 via Android
    Danswerme
        3
    Danswerme  
    OP
       2019-10-22 21:31:44 +08:00 via Android
    @SP00F 我试了一下,main 一旦出现之后 banner 的 flex: 1 就失效了,直接被挤没了。
    SP00F
        4
    SP00F  
       2019-10-22 21:35:52 +08:00
    @Danswerme #3

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

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

    你看看这个博客,https 证书有效的。
    banner 也是用了 100vh,到了安卓 chrome 就不能刚好占满全屏了。
    Danswerme
        11
    Danswerme  
    OP
       2019-10-22 23:45:28 +08:00 via Android
    @love 你是说 banner 使用 fixed ? banner fixed 之后 main 部分怎么处理呢?
    godoway
        12
    godoway  
       2019-10-23 00:31:26 +08:00 via Android
    @Danswerme
    <meta name="mobile-web-app-capable" content="yes">
    不知道这个有没有效
    felixin
        13
    felixin  
       2019-10-23 01:13:07 +08:00 via Android
    如果是 react 可以用 react-div-100vh
    molvqingtai
        14
    molvqingtai  
       2019-10-23 02:08:31 +08:00 via Android
    我是通过 js 动态设置为 innerHeight
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1023 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 20:32 · PVG 04:32 · LAX 12:32 · JFK 15:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.