粘连布局实现的三种方式

粘连布局

所谓粘连布局就是当内容容器没有超出时，footer是紧贴咋底部的，当内容超出的时候，footer紧随在内容容器之后，并不会超出容器。

OK，我们来看一副图，来了解粘连布局的效果

方法一

min-height: 设置最小高度，用于挤开footer，margin-top:-100px;使footer向上移动100px，占据了inner的地区，但是此时，内容盒子内容还是会超出容器，但是内容只能在内容盒子中显示，所以我们给main盒子设置paddin-bottom:100px;，使其内容永远都不会，超出父级容器

css

			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.outer{
				height: 100%;
				
			}
			.inner{
				min-height: 100%;
				
			}
			.main{
				padding-bottom: 100px;
				
			}
			footer{
				height: 100px;
				background: red;
				margin-top: -100px;
			}

html

<div class="outer">
			 <div class="inner">
				 <div class="main">
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
					 我是内容盒子 <br>
				 </div>
			 </div>
			 <footer></footer>
		 </div>

方法二

给inner设置padding-bottom: 100px; 用于撑开内容区域，但是需要给inner设置ie(框架盒子)使得，盒模型的计算发生改变，此时，inner的高度是等于min-height + padding-bottom

css

	*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.outer{
				height: 100%;
				
			}
			.inner{
				min-height: 100%;
				padding-bottom: 100px;
				box-sizing: border-box;
				
			}
			.main{
				
				
			}
			footer{
				height: 100px;
				background: red;
				margin-top: -100px;
			}

html的结构还是一样的

方法三

使用 calc css函数，计算min-height。

css

            *{
		    margin: 0;
		    padding: 0;
		}
			html,body{
				height: 100%;
			}
			.outer{
				height: 100%;
				
			}
			.inner{
			
				min-height: calc(100% - 100px);
				
			}

			.main{	}

			footer{

				height: 100px;
				background: red;
				margin-top: -100px;

			}

好的，以下就是这三种办法，