搞了一整天，将就看下吧

主要解决了底部导航的固定，初步深入flex,特此记录。

<style>
.all{height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.title{display:flex;justify-content:center;}
.bottom{display:flex;justify-content:space-around;}
</style>
<div class=all>
	<div class=top>
		<div class=title></div>
		<div class=body></div>
	</div>
	<div class=bottom>
		<span class=index>index</span>
		<span class=my>my</span>
		<span class=setting>setting</span>
	</div>
</div>

<script src=jq.js></script>
<script>
$('.index').click(function(){
	$('.title').html($(this).html())
	$('.body').html("<li class=index_my>go to my</li><li class=index_setting>go to setting</li>")
	$('.index_my').click(function(){
		$('.body').html('i am my page')
	})
	$('.index_setting').click(function(){
		$('.body').html('i am setting page')
	})
})
</script>