让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 ...
随机推荐
- cs-SelectTree-DropTreeNode, SelectTreeList
ylbtech-Unitity: cs-SelectTree-DropTreeNode, SelectTreeList DropTreeNode.cs SelectTreeList.cs 1.A,效果 ...
- iOS: iOS9 beta 请求出现App Transport Security has blocked a cleartext HTTP (http://)
错误描述: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecu ...
- Selenium webdriver Java 元素操作
本来这些东西网上一搜一大堆,但是本着收集的精神,整理一份放着吧!哈!哈!哈! 1. 输入框(text field or textarea) WebElement element = driver.fi ...
- B8:中介者模式 Mediator
用一个中介对象来封装一系列的对象交互,中介者使得各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立的改变它们之间的交互. 减少了各对象之间的耦合,使得可以独立的改变或复用各个Mediator或 ...
- web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数)
web报表工具FineReport经常使用函数的使用方法总结(日期和时间函数) 说明:凡函数中以日期作为參数因子的,当中日期的形式都必须是yy/mm/dd.并且必须用英文环境下双引號(" & ...
- android 调用系统界面
现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...
- Oracle,跳出游标循环
1,跳出游标的循环,不执行遍历了. 方法一:goto for c_row in 游标 loop if 条件 then dbms_output.put_line('测试跳出循环'); goto brea ...
- 通过浏览器查看nginx服务器状态配置方法
通过浏览器查看nginx服务器状态配置方法 投稿:junjie 字体:[增加 减小] 类型:转载 这篇文章主要介绍了通过浏览器查看nginx服务器状态配置方法,本文讲解开启nginx-status的配 ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- Android内存优化大全(中)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...