繁体中文
设为首页
加入收藏

推荐

公告

推荐文章
· CSS样式 14个高级技巧精选
· 一行代码杜绝iframe挂马
· css如何控制页面居中
· 与表格边框有关的CSS语法
· 多个CSS样式表争夺特定选...
· XHTML入门学习教程:框架...
· DIV+CSS布局实例:各种2栏...
· 左中右3栏布局中最先显示...
· 最小高度100%页脚保持在...
· CSS初级入门(1):整体布...
热点文章
广告

当前位置:网络首页 >> 网页制作 >> html/css >> 最小高度100%页脚保持在底部的布局方法

最小高度100%页脚保持在底部的布局方法 (3)

2008-01-08 10:42:04  作者:  来源:互联网  浏览次数:61  文字大小:【】【】【
简介:有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究 ...
关键字:保持 布局
4、为了让 footer 能够刚好在最下方,我们可以给 footer 加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度,即 margin-top: -50px; 。但是这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方,显然这是失败的。所以我们还要给 content-box 和 sidebar 加一个父级元素,设定它的下方内补丁等于 footer 的高度,强制把 content-box 和 sidebar 向上推一个 footer 的高度。同时,因为 content-box 和 sidebar 是浮动元素,所以我们还要让它 闭合浮动元素 。 这样就比较完美了。

#out-content {
padding-bottom: 50px;
}
#out-content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html #out-content {
height: 1%;
}
#footer {
height: 50px;
background: Background;
margin: -50px auto 0;
}



[1] [2] [3] [4]


相关文章