<template>
<view class="main">
<view class="main-top">
</view>
<view class="main-content">
</view>
</view>
</template>
<script setup>
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss" scoped>
.main {
height: 100%;
display: flex;
flex-direction: column;
background-color: red;
// &-top {
// height: 50px;
// background-color: yellow;
// }
// &-content {
// flex: 1;
// background-color: blue;
// }
}
</style>
一条小猿猿
- 发布：2022-08-26 11:52
- 更新：2022-11-14 15:21
- 阅读：260
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX版本号： 3.5.3
示例代码：
操作步骤：
一、设置page高度为100%
二、页面跟标签view也设置高度100%并给背景色红色，发现无效
三、运行到外部浏览器正常
一、设置page高度为100%
二、页面跟标签view也设置高度100%并给背景色红色，发现无效
三、运行到外部浏览器正常
预期结果：
页面高度为100%并渲染成红色背景
页面高度为100%并渲染成红色背景
实际结果：
页面高度为0
页面高度为0
bug描述：
vue3模式下运行到内置浏览器设置page高度为100%无效，运行到外部浏览器正常
代码如下
<template>
<view class="main">
<view class="main-top">
</view>
<view class="main-content">
</view>
</view>
</template>
<script setup>
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss" scoped>
.main {
height: 100%;
display: flex;
flex-direction: column;
background-color: red;
// &-top {
// height: 50px;
// background-color: yellow;
// }
// &-content {
// flex: 1;
// background-color: blue;
// }
}
</style>
2 个回复
DCloud_UNI_Anne
已记录后续优化，已加分感谢反馈！
DCloud_UNI_Anne
请升级至HBuilder X 3.6.9-alpha版本