uniapp-微信小程序page底部有空白，高度随内容自适应，底部无法固定

uniapp-微信小程序page高度随内容自适应，底部有空白，底部无法固定欢迎使用Markdown编辑器在做微信小程序时，page如果没有设置最小高度，那么高度会随着内容而自适应，但是需求是在底部有一个按钮，无论页面内容如何变化，都位于内容的最下面。如果只是撑大page 若page高度<100% 那么按钮只是在page底部而不是屏幕刚开始想到的是绝对定位，但放下如果page的内容过多，会覆盖

Amao?

2168人浏览 · 2021-04-14 14:11:29

Amao? · 2021-04-14 14:11:29 发布

uniapp-微信小程序page高度随内容自适应，底部有空白，底部无法固定

欢迎使用Markdown编辑器

在做微信小程序时，page如果没有设置最小高度，那么高度会随着内容而自适应，但是需求是在底部有一个按钮，无论页面内容如何变化，都位于内容的最下面。
在这里插入图片描述

如果只是撑大page 若page高度<100% 那么按钮只是在page底部而不是屏幕
刚开始想到的是绝对定位，但放下如果page的内容过多，会覆盖到按钮上。

代码

page{
		
		height: 100%;
	}
	.tmpl_mobile{     //template下面的div 
		   min-height: 100%;
		      display: flex; /* 容器为flex布局 */
		      flex-direction: column; /* 方向为纵向，保持正常的从上到下文档流 */
	}
	.conbon{          按钮外部div
		    margin-top: auto;
		    width: 100%;
		    // bottom: 0rpx;
		    border-top: 1px solid #fafafa;
		    padding-top: 15px;
	}