我贴出我案例的代码
.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>
);
}