让footer始终位于页面的最底部

http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html

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%,否则将无法随滚动条的滚动而滚动.

时间: 2024-11-07 03:24:19

让footer始终位于页面的最底部的相关文章

页面内容不够高footer始终位于页面的最底部

相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏,但是大型网站页面比较多的情况下footer都是模块化添加进去的,每个页面高度都不会一样,不可能去设置每个页面中间内容区min-height高度,而且用户的显示屏的大小都不一样,无法精确设置min-height高度,无法保证用户看到页面页

div footer标签css实现位于页面底部固定

Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以参考下 作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的“footer”部分永远固定在页面的底部呢?先

CSS让footer保持在页面底部

序:当希望将footer保持在页面底部(即使页面内容高度低于窗口高度),可以尝试下面的方法.. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS让footer保持在页面底部</title> <style type="text/css"> * { margin:

让footer固定在页面底部

最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的触屏页面只有一个,并且页面上内容固定,所以首先想到的处理方式也比较简单,也很实用. html代码: <header>头部</header> <div>内容</div> <footer>底部</footer> html代码方面不需要额外增加

滑动ListView自动隐藏页面头部和底部元素的例子

完整工程代码在这:https://github.com/NashLegend/Auto-Hide-ListView 现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+.在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐藏头尾元素,以显示更多内容,当列表向下滑动的时候,再将头尾元素拉出来.比如Google+. 刚刚进入时是这个样子: 再把列表身上一拉,头尾隐藏,成了这个样子: 再往下拉,就会再变回第一

优化laydate日期选取控件位于页面最右侧时会撑开页面的问题

laydate控件是我到目前以来用过最顺心的控件,虽然该控件已经非常优秀了,但在使用中还是会遇到点问题. 如果该控件位于页面的最右侧,点击后会出现如下问题. 可以看到点击后页面被撑大了. 解决方案: 修改laydate.js文件,先找到orien方法的定义,修改为: c.orien = function (a, b) { var d, e = c.elem.getBoundingClientRect(); var win_left = e.left + (b ? 0 : c.scroll(1))

jQuery判断页面滚动到底部

有时候我们需要页面滚动到底部的时候去加载更多的数据,实现思路基本上就是判断浏览器页面是否滚动到了页面底部,当滚动到页面底部的时候,用AJAX异步获取数据然后加载到页面中. 利用jQuery判断浏览器页面是否滑动到了底部: <script type="text/javascript"> // scroll event $(window).scroll(function(){ // scroll at bottom if ($(window).scrollTop() + $(w

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p:

js-让页面滚动最底部,显示到最底部

应用场景,聊天webapp中,让页面初始化的时候或者页面更新的时候,都让页面显示在最底部的聊天内容 可以借助react中的两个生命周期函数 componentDidMount和componentDidUpdate componentDidMount() { // 初始显示列表, 让页面滚动到底部scrollTo(x轴0, Y轴为内容滚动的高度) window.scrollTo(0, document.body.scrollHeight) } componentDidUpdate () { //