页面结构
<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 删除了是正常的.我想知道为什么会有这种情况
1
ChanKc 2020-07-07 22:49:31 +08:00 via Android
上截图
|
2
beilo OP |
4
ChanKc 2020-07-08 10:42:59 +08:00 via Android
还是不足以看出问题,你用了 flex 吗还是 block
|
5
beilo OP |
6
beilo OP 我贴出我案例的代码
.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> ); } |
7
ChanKc 2020-07-08 22:00:08 +08:00
火狐测试,无论是::after 还是 div,下面的 80px 都只能显示 30px
height: 100%就是父元素的 100%,也就是算出 70vh 所以 content 里加上 tab 70vh+50px 比 70vh 多了 50px,无论你怎么写 content 下面都会有 50px 显示不了 把后面的 div 和 after 删掉我也看不到“我是子项 19” |
8
beilo OP |