mengran_code的博客

其次，设置main（.container最后一个子元素）的padding-bottom值大于等于footer的height值；缺点：中间区域main如果内容不够，不能撑满页面的中间区域。首先，设置.container的高度至少充满整个屏幕；展示效果跟第一种是一样的，缺点跟第一种也是一样的。最后，设置footer的height值和。优点：footer一直存在于底部。

简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。

下面我在总结一下一般的三种扩展布局，这儿所示的扩展布局很常规，有的童鞋会说使用column或者flex啥的布局不是很方便吗，但是你也要看它的支持程度吧，比如你在手机端使用，那当然很好，那我要兼容IE8，IE9呢？，主要是讲实现一列固定宽度，一列宽度自适应的几种方法。

但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。博客的很多主题也是这样设计的，我的其他博客也是右侧固定宽度，左侧自适应屏幕的布局方式。这样实现，contentInner的实际宽度就是屏幕宽度-300px。不管是左是右，反正就是一边宽度固定，一边宽度自适应。但实际上这个方法是有局限性的，那就是html结构中。右侧一直固定不动，左侧根据屏幕的剩余大小自适应。那么上面讲解的第一种方法就无效了。就需要下面的方法来实现。

圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局来源于文章,双飞翼布局来源于淘宝UED。两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列称为最高列只需要使用一个额外的<div>标签。

所谓移动端响应式布局，就是最终布局适配不同的手机型号，针对不同的屏幕分辨率的终端上能够浏览网页展示的不同方式，我们也可以称为移动端适配布局。总结就是一个移动端网站能够兼容多个终端——而不是为每个终端做一个特定的版本。面对不同分辨率设备灵活性较强能够快捷解决多设备显示适应问题。