scroll-view标签,css高度如果设置calc计算属性,在真机上运行,就算内容未超出高度,也可以滑动,web运行不会,设置具体像素也不会

分类：HBuilderX

HBuilderX

uni-scroll-view {  
  width: 100%;  
  height: calc(100% - 100px);  
}

2026-01-30 09:09 负责人:无分享

4 个回复

1***@qq.com (作者)

  .scroll-area{  
                width: 100%;  
                height: calc(100% - .rpx2px(70)[]);  
                display: flex;  
            }  
            uni-scroll-view {  
                height: 100%;  
                                               }  
                    }

这样写问题未解决

2026-01-30 09:25 分享

DCloud_UNI_yuhe

你好请提供一下一个完整的可以运行的示例

2026-01-30 11:10 分享

1***@qq.com (作者)

<template>  

    <view class="content">  

        <view class="header">  



        </view>  

        <view class="text-area">  

        <scroll-view scroll-y>  

            <view class="list-item">  

                这是滚动元素  

            </view>  



        </scroll-view>  

        </view>  

    </view>  

</template>  



<script>  

    export default {  

        data() {  

            return {  

                title: 'Hello'  

            }  

        },  

        onLoad() {  



        },  

        methods: {  



        }  

    }  

</script>  



<style>  

    .content {  

        display: flex;  

        flex-direction: column;  

        align-items: center;  

        justify-content: center;  

        height: 100vh;  

    }  

    .header{  

        width: 100vw;  

        height: 100px;  

        background: green;  

    }  



    .text-area {  

        display: flex;  

        justify-content: center;  

        width: 100%;  

        height: calc(100% - 100px);  



    }  

    uni-scroll-view {  

        height: 100%;  

        }  

        .list-item{  

            width: 100%;  

            height: 50px;  

            margin-bottom: 8px;  

            background-color: rgba(0, 0, 0, 0.5);  

            display: flex;  

            justify-content: center;  

            align-items: center;  

        }  

</style>

2026-01-30 14:05

1***@qq.com (作者)

真机上面运行,用手指滑动会出现,web运行不会,

2026-01-30 14:06
DCloud_UNI_yuhe

回复 1***@qq.com: 真机是哪个平台？

2026-01-30 14:18
1***@qq.com (作者)

回复 DCloud_UNI_yuhe: 安卓

2026-01-30 14:20

DCloud_UNI_yuhe

这应该是安卓底层浏览器的差异，你可以试一下通过安卓上的浏览器运行web，也是可以滑动的

2026-01-30 15:28 分享

1***@qq.com (作者)

那他这个,就是没办法写计算属性,只能写固定值才能解决他这个问题吗

2026-01-30 15:47
1***@qq.com (作者)

确实在安卓的浏览器上面也会出现这个问题,用不了calc计算属性

2026-01-30 15:54
DCloud_UNI_yuhe

回复 1***@qq.com: 对，在安卓上特殊做一得

2026-01-30 16:10
1***@qq.com (作者)

回复 DCloud_UNI_yuhe:谢谢你

2026-01-30 16:50
DCloud_UNI_yuhe

回复 1***@qq.com: 好的

2026-01-30 16:55

Ask小助手

该问题请在专业群（ HBuilderX技术交流群）咨询，群中有相关专业的管理员和群友。

在 App 端（Android/iOS）的 scroll-view 组件里，只要给 scroll-view 设置了固定高度（无论是直接写死像素值还是用 calc 计算），引擎就会认为“我已经有固定容器了”，从而把可滚动区域锁定为这个固定高度。
如果此时子元素总高度 ≤ 容器高度，按设计本来不应该滚动；但 4.0 之后 scroll-view 的默认高度改为“子元素高度之和”，而 App 端在计算子元素高度时会把 calc 表达式当成一个固定值参与比较，导致即使实际内容没撑满，也会认为“子元素高度 = 容器高度”，于是出现“内容没超出也能滑动”的现象。Web 端因为浏览器本身对 calc 支持完整，不会触发这一差异。

解决思路

不用 calc，改用 flex 布局让 scroll-view 自动撑满剩余空间

.page {  
 display: flex;  
 flex-direction: column;  
 height: 100%;  
}  
.header { height: 100px; }  
.scroll-area { flex: 1; }   /* scroll-view 就是这个节点 */

如果必须用 calc，可在 onReady 里通过 uni.createSelectorQuery() 拿到父容器实际高度，再减 100px 后通过行内样式写到 scroll-view 上，避开 calc 表达式。
临时规避：给 scroll-view 再包一层 view，外层用 calc，scroll-view 本身高度设 100%，让 App 端计算时拿到的是“纯百分比”而不是 calc。

简单一句话：App 端 scroll-view 对 calc 支持不完整，建议改用 flex 或动态计算高度。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

scroll-view标签,css高度如果设置calc计算属性,在真机上运行,就算内容未超出高度,也可以滑动,web运行不会,设置具体像素也不会

4 个回复

公告

相关问题

scroll-view标签,css高度如果设置calc计算属性,在真机上运行,就算内容未超出高度,也可以滑动,web运行不会,设置具体像素也不会

与内容相关的链接

4 个回复

公告

相关问题