自适应布局中，几个常用的技巧： flex布局，calc计算属性，以及jQuery动态调整布局。本文将通过一个常见的Sticky footer 布局为例提供示例和说明。

页面自适应目标：

页面整体布局为上中下，上为header，下为footer，高度固定；中间为main-container，高度填充整个页面，并能随着页面内容及浏览器的大小缩放。

页面整体布局如下：(页面效果: layout.html )