CSS底部黏连实现原理

[TOC]

首先解释什么是底部黏连,以及什么时候会遇到底部黏连得需求.在页面撑不起视窗口的时候页面底部元素或区块可以贴在视窗口的底部,当页面内元素高度超过视窗后,底部元素跟随页面底部向下 '浮动'.

##底部黏连场景

网站页脚信息跟随场景
	大屏展示页底部信息向下跟随场景
	通知弹框超屏场景
	
这样可能有读者不知所云,那么以麦客我拙劣的绘画功底为各位画个概览图,看懂后自行脑补画面

总的来说这种画面必定有三个画面块`外壳` `正文信息` `底部跟随块`

┌──────────────────┐
								│`外壳`(.oFrame)   │
								│┌───────────────┐ │
								││               │ │
								││正文信息(.con)  │ │
								││               │ │
								│└───────────────┘ │
								│┌───────────────┐ │
								││底部跟随(.foot) │ │
								│└───────────────┘ │
								└───────────────── ┘
`外壳部分(.oFrame)`可以理解成整个页面或一个fixed弹框
`正文部分(.con)`是我们要展示的内容
`底部跟随(.foot)`可能是你的网站footer,备案号,或者是浮动框的操作关闭按钮,侧滑按钮等

##原理:
	外壳部分设置最小高度同时高度自动
	正文部分高度自动,其作用除了展示内容外还可以撑起页面,同时设置留给底部跟随的展示空间
	底部跟随设置成绝对定位一直贴底.oframe

##实现:
CSS:
```css
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-y: auto;
    }
    .oFrame,.con,.foot{
        box-sizing: border-box;
    }

.oFrame {
      position: fixed;
      top: 0;
      border: 5px solid red;
      /*position: relative;*/
	  /*浮动效果*/
      width: 100%;
      min-height: 100%;
      height: auto;
    }
    .oFrame::after,.oFrame::before{
      display: table;
      content: ' ';
      clear: both;
    }
    .con {
      border: 5px solid blue;
	  /*视窗口内测试1*/
	  /*height: 300px;*/
	  /*超出视窗口测试2*/
      height: 1900px;
      margin-bottom: 40px;
    }
    .foot {
      border: 5px solid green;
      width:100%;
      position: absolute;
      bottom: 0px;    /*不高于.con的margin-bottom*/
    }
```
##END