让footer始终位于页面的最底部
html代码:
<div class="container">
<div cass="header"></div>
<div class="body"></div> <div class="footer"></div>
</div>
第一种情况:footer随着滚动条的滚动而滚动
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二种情况:footer始终在其底部固定
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
注意:
1.千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.
让footer始终位于页面的最底部的更多相关文章
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- footer始终在页面最底部的方法(问题待检验)
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- 使用css方法使footer保持在页面的最底部
使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...
- footer部分,当页面主题内容不满一屏时,始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...
- javascript实现页面右侧在线客服始终跟随鼠标滚动而上下滚动且始终位于屏幕中间
效果如图,右侧的联系一栏始终位于页面的中间位置,且随着页面的上下滚动而滚动跟随 css的话没什么好说的,看图 代码 window.onload=window.onresize=window.onscr ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
随机推荐
- NTFS数据流和web安全
NTFS流简单介绍: NTFS因为它的稳定性 强大的功能 以及它所提供的安全性而成为一种更优越的文件系统,NTFS交换数据流(ADSs)是为了和Macintosh的HFS文件系统兼容而设计的,它使用资 ...
- IOS Vsync
vsync count Don't Sync Application.targetFrameRate 设置FPS上限 Every Second VBlank 30 Every VBlank 60 An ...
- [转载]centos 6.4中git如何正常显示中文
FROM: http://ju.outofmemory.cn/entry/63250 系统版本:centos 6.4 git版本:1.7.1,使用yum直接安装的. 当使用git status查看时, ...
- 删除Kafka中topic
步骤: 1.编辑Kafka启动时加载的配置文件server.properties,添加一行:delete.topic.enable=true 2.重启Zookeeper和Kafka 3.执行: ./b ...
- Windows 10系统专业精简
第1页:捆绑应用一键卸载 随着微软彻底放弃win7的更新,win8的弱势,新一代的win10系统则成为了微软着力打造的王牌系统. 作为微软最新的王牌产品,win10系统从功能到外观都有着超过前代产品的 ...
- 时光轴二之RecyclerView版时光轴效果
由于如今RecyclerView是support-v7包中的新组件,是一个强大的滑动组件.与经典的ListView相比,相同拥有item回收复用的功能,可是直接把viewholder的实现封装起来,用 ...
- 利用Bootstrap制作一个流行的网页
首先是html承载内容: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset ...
- 【DB2】SQL0501N FETCH 语句或 CLOSE 语句中指定的游标尚未打开,或者游标标量函数引用中的游标变量尚未打开。 SQLSTATE=24501
在DB2中建立存储过程时使用了隐式游标,在调用的时候报错如下: SQL0501N FETCH 语句或 CLOSE 语句中指定的游标尚未打开,或者游标标量函数引用中的游标变量尚未打开. SQLSTA ...
- CentOS6.5下docker的安装及遇到的问题和简单使用(已实践)
转载自 CentOS6下docker的安装和使用 Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS. Go语言.c ...
- NodeJS on Nginx: 使用nginx反向代理处理静态页面
最近OurJS后台已经从纯node.js迁移到了Nginx+NodeJS上来了,感觉性能提升了不少,特与大家分享. Nginx ("engine x") 是一个高性能的 HTTP ...