初始化样式和子绝父相

遇到的一些问题

1. 最近把前端重新温习了下，然后在写小程序，首页样式就难住了，中间区块，怎么都无法铺满空白区域。

   

2. 当时想到用子绝父相来解决，但即便使用了，还是有问题。中间区块设定bottom: 88rpx无法和底端bar对齐。

排查结果

1. 内容块无法准确拉伸位置到bottom: 88rpx，是因为父组件的高度有问题，这个父组件为最外层的组件.content，我当时给的高度是height: 100%。
2. 然后因为.content是page根组件的子组件，所以height:100% 是继承page的高度，但page并没有设定高度，所以出现了问题。

思考如何给page设置一个合理的高度

1. 因为用的是小程序，所以手机端有不同的高度，苹果6和苹果x高度就不一致，如果我设定一个固定高度，那么适配不同手机屏幕肯定会存在问题。
2. 后来查阅了文档，vh这个属性表示视口高度，也就是当前屏幕可见范围的高度，100vh表示整个屏幕，不论这个屏幕是什么类型的手机。
3. 其实只要给.content设置100vh即可。

配合子绝父相

1. 让.content作为父元素，使用相对定位，设置position: relative。
2. 再添加height: 100vh;属性。
3. 白色区块内容作为子元素，让其绝对定位，设置position: absolute。
4. 然后子元素使用top, bottom, left, right进行调整位置。

注意点

1. 一开始初始化那会，要给最外层的先设定一个高度，如果是动态的话就给一个100vh的高度填满视口。
2. 在父元素没有高度的时候，子元素使用height: 100%是没有效果的，即便是根组件使用，也是没有效果，这个和width: 100%不一样，不会撑开高度，具体原因浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

最终代码

1. html代码

   <template>
   	<view class="content">
   		<c-swiper class='foods-wrapper'></c-swiper>
   		<c-search></c-search>
   		<c-foods-list></c-foods-list>
   		<c-bottom-bar></c-bottom-bar>
   	</view>
   </template>

2. content部分

.content {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #007AFF;
	/* 视口高度100 */
	height: 100vh;
	/* 子绝父相，有利于子元素定位 */
	position: relative;
}

3. foods-wrapper部分代码

   .foods-wrapper {
   	display: flex;
   	flex-direction: row;
   	position: absolute;
   	background-color: #C03189;
   	width: 100%;
   	top: 350rpx;
   	bottom: 88rpx;
   }

refer

http://www.webhek.com/post/css-100-percent-height.html