uniapp初级入门-flex布局学习15-固定底栏

代码

<template>
	<view class="site">
		<view class="header">
			header
		</view>
		<view class="content">
			content
		</view>
		<view class="footer">
			foooter
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.site{
	display: flex;
	width: 100%;
	min-height: calc(100vh - var(--window-top));
	flex-direction: column;
	
	.header{
		background-color: #F4F3F0;
	}
	
	.content{
		flex: 1;
		background-color: #FFFFFF;
	}
	
	.footer{
		background-color: #404040;
	}
}
</style>

图示