在一个新页面中可以直接运行描述中的代码从而复现
 
                                        
                                    
                                    - 发布:2020-12-27 12:10
- 更新:2020-12-27 12:10
- 阅读:1234
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.7
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
第三方开发者工具版本号: 1.03.2011120
基础库版本号: 2.14.0
项目创建方式: HBuilderX
操作步骤:
                                    
                                         
                                
                                                                                                预期结果:
                                    
                                    
                                        不用加 border 也能获取到实际高度(包含margin等空白区域)
                                     
                                
                                                                                                不用加 border 也能获取到实际高度(包含margin等空白区域)
实际结果:
                                    
                                    
                                        目前解决的方案是给容器加上一个透明的border,
或者将类似 margin-bottom: 100rpx 替换成一个固定高度的空白容器 style=height: 100rpx加在需要空白区域的地方
                                     
                                
                                                            目前解决的方案是给容器加上一个透明的border,
或者将类似 margin-bottom: 100rpx 替换成一个固定高度的空白容器 style=height: 100rpx加在需要空白区域的地方
bug描述:
    <view id="one" style="outline: 1px solid blue;">  
        <view id="two" style="outline: 1px solid red;">  
            <view id="three" style="margin-bottom: 100px;">111</view>  
        </view>  
    </view>上述代码按正常逻辑 two 的高度是包含 margin-bottom 100 的
但是通过边框展示发现 margin 并不包含在 two中,这样可能导致获取 two 的高度不正确
但是如果给 two 加上 border 则能恢复正常,也能获取到实际的高度(包含 margin),如下所示:
    <view id="one" style="outline: 1px solid blue;">  
        <view id="two" style="border-bottom: 1px solid red;">  
            <view id="three" style="margin-bottom: 100px;">111</view>  
        </view>  
    </view> 
             
             
             
			