一、 上中下左固定 - fixed+margin 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。 html： + View Code css： + View Code 关键点： 上下部分就是普通处理，fixed固定布局 position: fixed; 中间利用上下padding，留出上下部分的位置。 左侧nav栏目，要固定也要用fixed。不过固定定位的元素要想高度百分百，可以使用top+bottom对应方位值的拉伸效果： 复制代码 section.fixedLeft nav { position: fixed; top: 60px; bottom: 60px; } 复制代码 之所以top:60;bottom:60;是因为header和footer的高度均为60px； 这里，section的flex布局可以不存在，因为右边内容区域使用margin-left边距值留出了左侧nav的位置，作为block布局流体自适应占满右侧剩余空间： 复制代码 section.fixedLeft article { margin-left: 200px; } 复制代码 总结： fixed固定定位 top+bottom方位值拉伸 margin边距 　　 二、上中下 左不固定 - flex 概括：如图，此种布局大致同第一幅，顶部、底部固定不动，只有整个中间区域可滚动，包括左侧菜单栏。 html : + View Code css： + View Code 关键点： 上中下同第一个，不再赘述。 这里唯一不同的是左侧菜单栏要同内容区域一同滚动： 去掉fixed固定定位即可。 同时，要想右侧全部展开，即占满出nav部分的右侧全部空间，可以使用flex布局： 父元素section: 复制代码 section.flexModal { display: flex; } 复制代码 右侧内容： 复制代码 section.flexModal article { flex: 1; } 复制代码 或者其他两列布局的方式，比如浮动、margin负边距实现。 具体实现方法同三列布局的各种方法原理一致。链接：CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法 总结： fixed固定定位 flex布局 三、上下固定的上中下单页布局 - flex实现 概括：常见的三栏单页布局。 html: + View Code css: + View Code 关键点： 上中下要有一个外部盒子包裹。这里偷懒使用了body： 复制代码 body{ display: flex; display: -webkit-box; display: -webkit-flex; flex-direction: column; -ms-flex-direction: column; } 复制代码 上下设置自己的具体高度即可： 因为是单行，所以偷懒只用了line-height。 复制代码 header,footer{ line-height: 66px; } 复制代码 中间内容区域瓜分剩余空间： 复制代码 article { flex: 1; } 复制代码 总结： 　　flex布局 　　垂直方向 四、上下固定中间分左右的单页布局 - flex实现，嵌套使用 在第三的基础上，中间还想分成左右两份，结合第二中section也flex的实现，就有了四。 hah 很明显，露怯了。。。 当我给artical赋了1000px的高度时，出现了bug就是上翻会露怯，底部跟随而上。 所以，这种只适合不超出一屏的情况。 html: + View Code css: + View Code 关键点： 上中下要有一个外部盒子包裹。这里偷懒使用了body： 复制代码 .container{ display: flex; display: -webkit-box; display: -webkit-flex; flex-direction: column; -ms-flex-direction: column; } 复制代码 父元素设置flex，然后布局方向为主轴从上到下，那么header和footer就会在最上边和最下边。 他们只需要设置自己的具体高度即可： 因为是单行，所以偷懒只用了line-height。 复制代码 header, footer { line-height: 66px; background: lightgreen; } 复制代码 中间内容区域瓜分剩余空间： 复制代码 section { flex: 1; } 复制代码 但是，中间现在又分了nav和article两部分，需要两列布局，我还是使用flex实现： 先在section加一句display 复制代码 section { flex: 1; display: flex; } 复制代码 nav因为只需要固定的宽度： 复制代码 nav { width: 200px; } 复制代码 右侧内容占据nav以外的剩余区域即可： 复制代码 article{ flex: 1; } 复制代码 总结： 　　flex 套 flex 五、上下固定中间分左右的单页布局 - absolute实现 跟第四的效果一样，只是换魔鬼的儿子absolute来实现： html : + View Code css : + View Code 　　 关键点： 把整个body当作relative父元素外框 上下结构是上下绝对定位： 复制代码 header, footer { position: absolute; line-height: 48px; left: 0; right: 0; z-index: 1; color: aquamarine; text-align: center; background: #333; } 复制代码 复制代码 footer { bottom: 0; } 复制代码 中间的左、右结构同时使用absolute定位，并用top、bottom拉伸加持。这样可以使他们的高度100%绝对占据元素的高度。 复制代码 position: absolute; top: 0; bottom: 0; 复制代码 然后左右的结构布局使用left和宽度配合 比如左边aside直接 复制代码 left: 0; width: 280px; 复制代码 右边article用left躲过左边的宽度： left: 280px; 最后，左右再分别使用padding空出header和footer的位置 padding: 68px 20px; （用top+bottom对应数值也可以） 复制代码 position: absolute; top:60px; bottom: 60px; 复制代码 总结： 　　absolute + 方位值 　　适合单页布局 六、上下固定中间滚动的移动单页结构- fixed定位实现 html： + View Code css： + View Code 关键点： header上固定定位 复制代码 position: fixed; top： 0； 复制代码 footer下固定定位 复制代码 position:fixed; bottom: 0; 复制代码 上下均通过line-height实现固定高度，使用left+right横向拉伸实现宽度100%效果： 复制代码 line-height: 48px; left: 0; right: 0; 复制代码 中间不定位。只是padding上下留出header和footer的高度占位，且overflow：hidden 复制代码 padding: 68px 0; overflow: auto; 复制代码 总结： 　　上下 fixed 　　中间 padding+overflow 七、上下固定中间滚动的移动单页结构- absolute定位实现 html： + View Code css： + View Code 关键点： header上绝对定位 复制代码 position: absolute; top： 0； 复制代码 footer下绝对定位 复制代码 position:absolute; bottom: 0; 复制代码 上下均通过line-height实现固定高度，使用left+right横向拉伸实现宽度100%效果： 复制代码 line-height: 48px; left: 0; right: 0; 复制代码 中间绝对定位。 position: absolute; 左右方位值水平放向拉伸实现宽度100%效果： 复制代码 right: 0; left: 0; 复制代码 中间的上、下方位值留出header、footer的高度占位值： 复制代码 top: 48px; bottom: 48px; 复制代码 超出会出现滚动条，不超出就没有滚动条： overflow：auto 总结： 　　全屏三大块元素均使用absolute布局。 平时遇到这种布局，通常想到用fixed固定顶部和尾部，然后中间的有个和顶部尾部同值的上下padding，好让内容撑开与上下的距离。但是这种布局会有bug。 如果中间内容不小心设置了过高的高度超出视图，会让底部跟随中间向上滑动。 全屏使用absolute布局是个很好的方法。 另一篇：CSS-三栏响应式布局（左右固宽，中间自适应）的五种方法 2018-09-10 13:11:39 论墨逍遥林， 逍遥林中万花落。 对酒当歌， 看万里山河阔。 人生有多少春夏可消磨？https://www.cnblogs.com/padding1015/p/9577961.html