CSS_贴在底部的布局

最新推荐文章于 2024-10-26 18:13:01 发布

转载最新推荐文章于 2024-10-26 18:13:01 发布 · 1.3k 阅读

文章标签：

#css #html #div #border #class

结构与样式专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种利用CSS实现页面固定底部栏效果的方法。通过外部容器设置100%的高度，内部主要内容区域预留底部栏高度，底部栏采用相对定位并上移自身高度距离，从而确保在内容变化时底部栏始终处于页面最下方。

先看代码:

<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> content </div> <div id="side"> side </div> </div> </div> <div id="footer"> footer </div>

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { border:1px solid #CCCCCC;} html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both;} /*兼容性Hack：*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac /*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */</style>

基本原理:

把footer放在Wrap的外面,并把Wrap的高度设为100%;

footer使用相对定位,向上浮动本身的高度(margin-top: -150px; );

为防止内容被覆盖,Wrap里面的内容容器设置为padding-bottom: 150px,让出位置;