V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
beilo
V2EX  ›  CSS

当父 div 设定 height: 70vh; 子 div height:100%+overflow-y: scroll;后::after 的 height 不对

  •  
  •   beilo · 244 天前 · 1153 次点击
    这是一个创建于 244 天前的主题,其中的信息可能已经有所发展或是发生改变。

    页面结构

    <div> // 77vh
        <div  class="tab"/> 高度 44px
        <div class="content"> // height:100%+overflow-y: scroll;
            xxxxx 这里是多个 item 总共高度大于 77vh,可滚动
            // <div/> 这个 div 如果设置高度为 80px,则正常,但是用下面的::after 设置 80px 则有一部分超出了
    content 的高度,导致样式异常,滚动了也有一部分会被遮挡
            ::after
        </div>
    </div>
    

    代码如上所述:如果我把 class="tab"这个 div 删除了是正常的.我想知道为什么会有这种情况

    9 条回复    2020-07-09 13:26:25 +08:00
    ChanKc
        1
    ChanKc   244 天前 via Android
    上截图
    beilo
        2
    beilo   243 天前
    [图片]( https://s1.ax1x.com/2020/07/08/UEsskq.png)

    下面蓝色部分为::after 的高度
    beilo
        3
    beilo   243 天前
    @ChanKc 大概效果就是这样的
    ChanKc
        4
    ChanKc   243 天前 via Android
    还是不足以看出问题,你用了 flex 吗还是 block
    beilo
        5
    beilo   243 天前
    @ChanKc 我写了个案例,底下蓝色是::after,和黑色是同一高度 80px

    https://07vry.csb.app/
    beilo
        6
    beilo   243 天前
    我贴出我案例的代码

    .App {
    font-family: sans-serif;
    text-align: center;
    }
    .heigth-80 {
    height: 80px;
    background: #223333;
    }
    .mask-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 11;
    }
    .dialog {
    height: 70vh;
    background: white;
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    border-radius: 18px 18px 0px 0px;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
    }
    .tab {
    height: 50px;
    }
    ul,
    li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul {
    padding: 10px 25px;
    }
    li {
    display: flex;
    min-height: 44px;
    align-items: center;
    line-height: 40px;
    background: #faf;
    }
    .yellow {
    background: yellow;
    }
    .content {
    overflow-y: scroll;
    height: 100%;
    }
    .content::after {
    content: " ";
    display: block;
    height: 80px;
    background: blue;
    }
    .bottom-fixed-popup {
    position: fixed;
    height: 50px;
    background: red;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 0px 5%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    }


    // 上面是 css

    import React from "react";
    import "./styles.css";

    export default function App() {
    const list = [];
    const listBg = [];
    for (let index = 0; index < 20; index++) {
    list.push(index);
    }
    for (let index = 0; index < 100; index++) {
    listBg.push(index);
    }
    return (
    <div className="App">
    {listBg.map(item => (
    <li className="yellow">我是背景{item}</li>
    ))}
    <div className="mask-bg">
    <div className="dialog">
    <div className="tab">我是标题</div>
    <div className="content">
    <ul>
    {list.map(item => (
    <li>我是子项{item}</li>
    ))}
    </ul>
    <div className="heigth-80" />
    </div>
    {/* <div className="bottom-fixed-popup " /> */}
    </div>
    </div>
    </div>
    );
    }
    ChanKc
        7
    ChanKc   243 天前
    火狐测试,无论是::after 还是 div,下面的 80px 都只能显示 30px
    height: 100%就是父元素的 100%,也就是算出 70vh
    所以 content 里加上 tab 70vh+50px 比 70vh 多了 50px,无论你怎么写 content 下面都会有 50px 显示不了
    把后面的 div 和 after 删掉我也看不到“我是子项 19”
    beilo
        8
    beilo   242 天前
    @ChanKc
    height: 100%就是父元素的 100%,也就是算出 70vh
    这句话让我突然明白了,我一直误以为是剩余的空间。现在我明白了。
    谢谢
    ChanKc
        9
    ChanKc   242 天前
    @beilo 你要用剩余空间就需要 flexbox 布局
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2661 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:47 · PVG 23:47 · LAX 07:47 · JFK 10:47
    ♥ Do have faith in what you're doing.