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

[beilo]

页面结构

<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 删除了是正常的.我想知道为什么会有这种情况

[ChanKc]

上截图

[beilo]

[图片]( https://s1.ax1x.com/2020/07/08/UEsskq.png)

下面蓝色部分为::after 的高度

[beilo]

@ChanKc 大概效果就是这样的

[ChanKc]

还是不足以看出问题，你用了 flex 吗还是 block

[beilo]

@ChanKc 我写了个案例,底下蓝色是::after,和黑色是同一高度 80px

https://07vry.csb.app/

[beilo]

我贴出我案例的代码

.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]

火狐测试，无论是::after 还是 div，下面的 80px 都只能显示 30px
height: 100%就是父元素的 100%，也就是算出 70vh
所以 content 里加上 tab 70vh+50px 比 70vh 多了 50px，无论你怎么写 content 下面都会有 50px 显示不了
把后面的 div 和 after 删掉我也看不到“我是子项 19”

[beilo]

@ChanKc
height: 100%就是父元素的 100%，也就是算出 70vh
这句话让我突然明白了，我一直误以为是剩余的空间。现在我明白了。
谢谢

[ChanKc]

@beilo 你要用剩余空间就需要 flexbox 布局