【无标题】app，小程序常用页面布局

app，小程序常用页面布局，内容部分可滑动

1.底部盒子高度不确定，主体内容盒子高度占满剩余全部（flex布局）

//css部分
.container{
	height: 100%;
    overflow-y:hidden;
    display: flex;
    flex-direction: column;
}
.content{
	flex:1;
	overflow-y:auto;
}
.footer{}


//html部分
<view class="container">
	<view class="content">
	内容区域高度自适应，可滑动
	</view>
	<view class="footer>
	一般用于放置底部按钮，
	如提交按钮之类的，footer会被顶到最底部，
	实现了吸底效果，如果底部固定高度，
	可加height属性，不加height，高度则由内容撑开
	</view>
</view>

2.底部高度固定，内容区域高度自适应(calc属性)

//css部分
.container{
	height: 100%;
    overflow-y:hidden;
}
.content{
	height:calc(100% - 100rpx); // -号左右一定要有空格，否则不生效
	overflow-y:auto;
}
.footer{
	heigtht:100rpx;
}


//html部分
<view class="container">
	<view class="content">
	内容区域高度自适应，可滑动
	</view>
	<view class="footer>
	</view>
</view>