方法:使用flex弹性布局
1,父元素(容器)指定为flex弹性布局,主轴方向flex-direction为column,宽度width为100%,高度height为100vh。
2,固定高度的子元素,width: 100%;height: 100rpx;
3,需要铺满的子元素,width: 100%;flex: 1;
具体代码如下:
<template>
<view class="pager">
<view class="view1"></view>
<view class="view2"></view>
<view class="view1"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.pager{
/* 指定容器为 flex弹性布局 */
display: flex;
/* 主轴方向为垂直方向,起点在上方 */
flex-direction: column;
width: 100%;
height: 100vh;
}
.view1{
width: 100%;
height: 100rpx;
background: red;
}
.view2{
width: 100%;
background: blue;
flex: 1;
}
</style>
显示效果如下: