关于页面的头尾固定中间高度自适应的小结

    
    


    

        
header
        

            

                
item1
                
item2
                
item3
                
item4
                
item5
                
item6
                
item7
                
item8
                
item9
                
item10
                
item11
                
item12
                
item13
                
item14
                
item15
                
item16
                
item17
                
item18
                
item19
                
item20
            
        
        
footer
    

实现的效果：
页面分为header、container、footer三个部分；header、footer固定，中间部分自适应高度；并且这个效果对于不同手机能够适配。
关于这个效果的小结：
1.利用display:flex。给父级元素(warper)设置display:flex;调整主轴方向为column。设置header的高度，order：0，flex-shrink：0。footer的高度，order：2，flex-shrink：0。container的设置是：flex-grow：999(这样中间部分就可以自动拉伸和缩减)；order：1(确定container的顺序是在中间)。
2.百分比布局。关于百分比布局的参照或者说基准是什么？之前我一直认为是父级元素，但是这中看法并不完整，当父级元素有设置高度时，参照是父级，否则的话就向上一级去寻找设置高度的元素，作为参照。在本文的例子中baseline的参照是warper(是不是很震惊)，忽然不是container。
3.拓展一下：我之前的做法是在warper设置padding-top和padding-bottom分别给header和footer让出高度。