<!-- 父层 -->
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
</div>
<!-- 页脚 -->
<div id="footer">
</div>
</div>
#wapper{
position: relative; /*重要!保证footer是相对于wapper位置绝对*/
height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持,IE6要单独配置*/
}
#footer{
position: absolute; bottom:; /* 关键 */
left:; /* IE下一定要记得 */
height: 60px; /* footer的高度一定要是固定值*/
}
#main-content{
padding-bottom: 60px; /*重要!给footer预留的空间*/
}
<!--[if IE 6]->
<style>
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/
</style>
<![endif]-->

[JavaScript] css将footer置于页面最底部的更多相关文章

  1. HTML5将footer置于页面最底部的方法(CSS+JS)

    JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...

  2. HTML的footer置于页面最底部的方法

    方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...

  3. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  4. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  5. HTML5+CSS把footer固定在底部

    在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...

  6. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  7. 【转载】CSS Sticky Footer: 完美的CSS绝对底部

    下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...

  8. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  9. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

随机推荐

  1. 品味性能之道<七>:索引基础

    一.索引概述      索引(index),它是数据库必不可少的一部分.它其实很简单呐!很好理解.      索引好比如一本书的目录,一张地图,一个写字楼里挂在大堂墙上的公司名录,一个地铁站的出口指示 ...

  2. laravel在控制器中赋值给视图

    1.控制器 2.视图

  3. 2017年UX设计流行的六大趋势

    UX设计在接下来的2017年会有怎样的发展趋势呢?让我们一起回顾去年用户体验设计领域中的变化,来展望新一年用户体验设计的发展趋势吧. 1. 原型制作的爆炸性增长   随着用户体验设计师和用户界面设计师 ...

  4. 4.spring对象的创建(静态工厂 实例工厂 泛型,嵌套类型)

    1.原料类 namespace CreateObjects{    public class GenericClass<T>    { }} PersonDao 类 包含嵌套类型 name ...

  5. part1:3-VMware及redhat enterprise Linux 6 的安装

    创建虚拟机PC FILE->NEW Virtual machine->custom(自定义,定制)->...->I WILL INSTALL THE OS LATER-> ...

  6. 2018秋季c语言基础课第一次作业

    1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 答:邹欣老师提到了很多种关系,不外呼就是两种:平等或者不平等.平等的师生关系与陌生人无异,而自古以来尊师重道却被世人所 ...

  7. composer 安装扩展失败的决绝方法

    https://getyii.com/topic/32

  8. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  9. 33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距

    33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距 ① When young women were found to ma ...

  10. 有关在 Word 中撰写博客的帮助

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...