问题描述
如下代码所示, 最终的效果无论是IOS还是Android设备上的钉钉内置浏览器中, node元素并没有渲染成预想中的70%高度.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<template>
<div>
<div class="parent">
parent
<div class="child">
child
<div class="node">node</div>
</div>
<div>占位</div>
</div>
<div>{{ ua }}</div>
</div>
</template>
<style lang="scss" scoped>
div {
font-size: 20px;
}
.parent {
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
padding-top: 20px;
.child {
flex-grow: 1;
background-color: rgb(83, 189, 83);
.node {
height: 70%;
background-color: rgb(98, 98, 253);
}
}
}
</style>
.node {
height: 70%;
background-color: rgb(98, 98, 253);
}
}
}
</style>
|
希望的结果
解决方案
给child一个非auto的高度, 0也可以
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<template>
<div>
<div class="parent">
parent
<div class="child">
child
<div class="node">node</div>
</div>
<div>占位</div>
</div>
<div>{{ ua }}</div>
</div>
</template>
<style lang="scss" scoped>
div {
font-size: 20px;
}
.parent {
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
padding-top: 20px;
.child {
flex-grow: 1;
height: 0;
background-color: rgb(83, 189, 83);
.node {
height: 70%;
background-color: rgb(98, 98, 253);
}
}
}
</style>
|