一、简介

uni项目运行到小程序，红色区域固定不动，黄色区域是滚动的。切换不同设备能适配，这样就要求黄色区域的高度设定不能是死值。想要实现的效果如下：

二、解析

红色区域的高度在不同设备里面解析出来并不都是一样的，有的手机屏幕长，所以我们需要动态获取黄色区域距离顶部的距离。
黄色区域是scroll-view区域，如果设定固定高度（死值），在不同设备下底部会有白色空隙，最合理的解决方式就是获取她距离顶部的距离top，我们都知道满屏的高度是100vh,所以用100vh减去top，剩下的就是合适的黄色的高度值。
条件：

• 获取当前元素距离顶部的距离是top
• 满屏高度是100vh
• 红色整体高度是100vh - top

获取高度代码如下：

onLoad() {
	let query = uni.createSelectorQuery().in(this);
	//需要给黄色区域设置一个id标识，在这里是demo
	query.select('#demo').boundingClientRect(data => {
		console.log(data.top)//这个就是距离顶部的高度
		this.listTop = data.top//赋值，待会要用
	}).exec();
},

整体代码：

<template>
	<view class="content">
		<view class="top">
			固定不动
		</view>
		<scroll-view scroll-y="true" id="demo" :style="'height:calc(100vh - '+listTop+'px)'" >
			<view v-for="(item,index) in 100" :key="index" style="height: 100rpx;">{{index}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listTop: 0,
			}
		},
		onLoad() {
			let query = uni.createSelectorQuery().in(this);
			query.select('#demo').boundingClientRect(data => {
				console.log(data)
				this.listTop = data.top
			}).exec();
		},

		methods: {

		}
	}
</script>

<style>
	.top {
		height: 500rpx;
		background-color: red;
		margin-bottom: 20rpx;
	}

	scroll-view {
		background-color: yellow;
	}
</style>

注意：css的动态使用

:style="'height:calc(100vh - '+listTop+'px)'"

三、参考网址

uni获取高度：
https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
不同单位之间的计算公式：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
vh单位：
https://www.php.cn/website-design-ask-493011.html