html解决粘连问题,html的粘连布局

什么是粘连布局

很多时候我们开发页面的时候会遇到这么一种需求，一个页面里面有内容和按钮，这个按钮当内容超过页面宽度的时候这个按钮就会跟在内容的后面，也就是底部，当内容不足以占满整个页面的时候这个按钮就在页面的底部。即如下图所示

内容超过页面高度的时候时候

这个时候我们可以看到footer是在内内容的底部的。

当内容小于页面高度的时候

这个时候我们可以看到footer是在页面的底部

那么我们怎么实现这种布局呢

废话少说，直接上代码

粘连布局

html,body{

/* 设置页面容器宽度 */

height: 100%;

background-color: aliceblue;

}

#warp{

text-align: center;

}

#warp{

/* min-height: 100%;的作用

1、设置内容区域最小高度是为了当内容高度不足以铺满窗口高度的时候能把

footer挤到内容的底部去，

2、而当内容的高度超过了窗口高度，内容的包裹容器也能

自动增加高度

3、防止固定高度出现内容刺穿内容包裹容器的情况

*/

min-height: 100%;

background-color: antiquewhite;

}

#warp .main{

/* 让内容不能跑到包裹区底部50px的区域

为了防止内容与footer重合 */

padding-bottom: 50px;

}

#footer{

width: 100%;

height: 50px;

/* 移到内容包裹区的底部50px区域，

防止被内容包裹区挤出窗口视图外面，

从而导致无法看到 */

margin-top: -50px;

background-color: aqua;

}

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

main

footer

注意：本文归作者所有，未经作者允许，不得转载