• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 让页脚紧贴页面底部的CSS代码

让页脚紧贴页面底部的CSS代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含页脚,页面底部等相关知识,佚名 希望在学习及工作中可以帮助到您
怎么使用Sticky Footer代码

介绍

Google一下可以找到很多让页脚紧贴页面底部的方法,我试过其中的很多,但他们总会在某些方面存在一些问题。之所以有这些问题,可能是因为出现了更新版本的浏览器。一些方法因为太过久远,原本在老版本浏览器可以正常工作,却不再适用更新之后的版本。也因为这些页面太过久远,过去曾被大量链接过,所以在Google的结果中排名很高。这样,一些网站管理员在搜索sticky footer方案的时候,对搜索出的结果都很挠头,因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案,它的确工作的很好。但是,它必须要单独写一个没有内容的div,来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的,我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上,并受到Cameron Adams和this piece at lwis.net工作的启发。在Google Chrome和其他浏览器中,当你缩放窗口的时候,页脚会浮上来。该方案会应用一种Clear fix hack方法,把页脚固定在适当的位置上,这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中,它都能很好的工作。

HTML 代码

下面是HTML代码的基本结构,footer标签在wrap标签的外面。


HTML和CSS源文件打包下载

您可能想查找下面的文章:

  • 使用div+CSS将页脚始终控制在页面最下方的方法
  • 将页脚固定在页面底部的CSS实战
  • 在移动Web页面中使用CSS固定页脚
  • css让页脚始终在底部不论页面内容多少
  • 让页脚紧贴页面底部的CSS代码

相关文章

  • 2017-08-06IE6对多个CSS样式的解析
  • 2017-08-06IE6 Bug overflow:hidden失效
  • 2017-08-06CSS的后代选择器基础使用示例
  • 2017-08-06CSS Sprite从大图中截取小图完整教程
  • 2017-08-06详解CSS3的opacity属性设置透明效果的用法
  • 2017-08-06使用Loader.css和css-spinners来制作加载动画的方法
  • 2017-08-06css 控制鼠标显示样式示例
  • 2017-08-06css中省去绝对地址前的http: 节省字节
  • 2017-08-06纯CSS3绘制打火机动画火焰效果
  • 2017-08-06css 背景透明 元素(标签)背景透明的css设计

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • php的动态页面在ie内核的浏览器下面整体偏左的解决方法
    • CSS毛玻璃效果如何实现
    • 不固定宽度和高度的情况下CSS调整div居中的方法总结
    • DIY属于个人开发使用的CSS Reset
    • Ztree在低版本浏览器下显示错行问题的解决方法
    • 关于CSS样式表文件组织形式的整理
    • 网页设计中input标签写CSS时需要注意的几个问题
    • DIV+CSS命名规范全记录
    • IE6下position fixed失效的解决方法(亲测有效)
    • bootstrap3.0教程之栅格系统原理(布局)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有