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

用CSS固定footer在底部的疑问?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

这个是css中比较经典的问题。

这里固定在底部包括两种情况,第一种是当页面内容尚未填充满的时候,页脚需要固定在底部,第二种是页面填充满后,页脚需要随页面内容的增加而填充在主体内容的下方。

由于受书写模式的影响,一般情况下无法直接将一元素置于垂直的某一位置,除非使之脱离普通流。而脱离普通流后就很难满足第二种要求,这种情况下也可借助js进行计算进行定位,但这种效果可能由于计算时间和浏览器渲染的问题发生跳动(没亲自试过)。因此,这里提供一种比较通用的,基于普通文档流的解决方法。

具体解决方案:直接来代码。
  • 对于一个非根元素,如果其position值是relative或static(默认),包含块的设置为最近的块级框、表单元格或行内块祖先框的内容边界构成。
  • 对于一个非根元素,如果其position值是absolute,包含块则由最近的position值不是static的祖先元素(可以是任何类型)。这个过程如下:
- 如果这个祖先是块级元素,包含块则设置为该元素的内边距边界;换句话说,就是由边框界定的区域。
- 如果这个祖先是行内元素,包含块则设置为该祖先元素的内容边界。在从左向右读的语言中,包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界,包含块的下边界和右边界是最后一个框内容区的下边界和右边界。
- 如果没有祖先,元素的包含块定义为初始包含块。
当footer的position设置为relative的时候,它的包含块就是leftcolumn,所以bottom的值设置为负(-100px)表示为远离leftcolumn下边框100px。
当footer的position设置为absolute的时候,它的包含块则为container,它的bottom值(-100px)所对应的是container的下边框,所以此时footer在container的下面,我照着你给的html和css做了一次,发现和你所说的“不会影响到最终结果”并不一样,footer的位置确实变化了。
而container的position值无论设置成relative还是position,它的包含块都是初始包含块,所以没有变化(这里是我自己猜的,或者它的包含块是body?)
另外,css中body部分的background少了一个“u”,#leftcolumn部分最后一个属性少了“;”。
本人也是刚学不久,望大家指正~ 有试过position设置fixed么

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

相关文章

  • 2018-12-03html5的web存储
  • 2018-12-03HTML5样式控制示例代码_html5教程技巧
  • 2018-12-03关于HTML5 Canvas的事件处理
  • 2018-12-03移动端 web 开发的内测环境如何配置?
  • 2018-12-03JS中捕获console.log()输出的方法
  • 2018-12-03HTML5中Localstorage的使用教程_html5教程技巧
  • 2018-12-03HTML5-canvas的使用方法介绍
  • 2017-08-06HTML5实现晶莹剔透的雨滴特效
  • 2018-12-03html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形_html5教程技巧
  • 2018-12-03HTML5实战与剖析之CSS选择器——querySelectorAll()

文章分类

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

最近更新的内容

    • 毛毛虫爬行动画怎样实现
    • HTML5是什么 HTML5是什么意思 HTML5简介
    • 本人想去培训机构学习编程,培训html5 还是 ios 还是安卓好呢?
    • 使用phonegap操作数据库的实现方法
    • h5中main元素的实例详解
    • HTML5 WebSocket实现多文件同时上传的实例
    • HTML5实践-使用css3如何完成google涂鸦动画的详解
    • 微信端html5页面如何调用分享接口
    • HTML5 CSS3 精美案例 -实现VCD包装盒个性幻灯片的详情
    • H5的LocalStorage如何在本地存储刷新值

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

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