@colorfulberry 嗯呐 谢谢。主要是不想在上海再待下去了。离家太远了

@rainfallmax 刚好都没带 哈哈哈

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

我贴出我案例的代码

.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,和黑色是同一高度 80px

https://07vry.csb.app/

@ChanKc 大概效果就是这样的

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

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

@doommm 谢谢.这个很完美的解决问题.

我现在是在 vue.config.js 里面配置了如下代码

```
chainWebpack: (config) => {
// https://github.com/vuejs-templates/webpack/issues/1258
config.when(
isProduction,
() => config.devtool("cheap-module-eval-source-map"),
() => config.devtool("eval-source-map")
);
},
```

[参考链接]( https://github.com/vuejs-templates/webpack/issues/1258)

...话说我怎么用 md 语法

如果想自动保存 observable 数据的话我是这么做的
```
import { observable, action, autorun, toJS, set } from "mobx";

function autoSave(store, save) {
let firstRun = true;
autorun(() => {
// 此代码将在每次运行任何可观察属性时运行
// 对 store 进行更新。
const json = JSON.stringify(toJS(store));
if (!firstRun) {
save(json);
}
firstRun = false;
});
}
class RouteState {
@observable state = {};
constructor() {
this.load();
autoSave(this, this.save.bind(this));
}
load() {
const storeTemp = sessionStorage.getItem("route_state");
if (storeTemp) {
const data = JSON.parse(storeTemp);
set(this, data);
}
}
save(json) {
sessionStorage.setItem("route_state", json);
}
@action.bound
actionState(_state) {
this.state = _state;
}
}

```
[可以参考下这个博客]( https://www.cnblogs.com/beilo/p/10996385.html)
[参考链接 1]( https://stackoverflow.com/questions/40292677/how-to-save-mobx-state-in-sessionstorage)

@love 是的,但是那几个很快,而且必须要放在前面的.head 上的加载时间可以忽略不计.主要是 vendors.js 占用时间,导致白屏.虽说我已经分包处理过,在线上首屏首次加载在 1s 之内,但是 ios 那段白屏时间还是有的.想看看能不能优化的更好点