Layout框架的footer固定在底部

利用css3的flexbox,

flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率
flex-shrink：如果空间不足，元素的收缩比率
flex-basis：元素的伸缩基准值

HTML部分：

<template>
	<div class="layout">
		<Layout>
			<Header class="header>....</Header>
			<Content class="content">....</Content>
			<Footer class=" foot">....</Footer>
		</Layout>
	</div>
</template>

Style样式

<style>
	html {
		height: 100%;
	}
	.layout {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.header{
   /* 我们希望 header 采用固定的高度，只占用必须的空间 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}
	.content {
	   /* 将 flex-grow 设置为1，该元素会占用全部可使用空间 
      而其他元素该属性值为0，因此不会得到多余的空间*/
		flex:1 0 auto;
	}
	.foot {
	   /* 和 header 一样，footer 也采用固定高度*/
		flex:0 0 auto;
	}	
</style>