如何将页脚固定在页面底部(sticky footer)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Zhooson/article/details/69396765

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。如下图所示:

这里写图片描述

详细内容请移步>>>>http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page

最近发现一篇更好的文章(2017.4.20)
https://aotu.io/notes/2017/04/13/Sticky-footer/

展开阅读全文

如何将div标签中的内容固定在页面底部

07-21

在页面刚打开时,div中的内容还是在页面底部的,但当拖动滚动条的时候,div中的内容还是停留在原位,没有跟随滚动条一起向下滚动,请高手们帮忙查看一下源代码,到底是哪的错误,谢谢了!rn以下是源码:rnhtml文件:rnrnrnrn rn rn rn rnrn rnrnrnrnrnrnrn rn rn Home rn Contact rn Portfolio rn Music rn Video rn History rn Calendar rn RSSrn RSS rn RSS2rn rnrn kdfjrnrn rn rn Home rn Contact rn Portfolio rn Music rn Video rn History rn Calendar rn Links rn RSS rn RSS2 rn rnrnrn rn rn rnrnrnrnrnrnrn以下是css文件:rnbody rn font: 11px Arial, Helvetica, sans-serif;rn background: #ffffff url(images/main-bg.gif);rn padding: 0;rn margin: 0;rnrnimg rn border: none;rnrnrn/* dock - top */rn.dock rn position: relative; rn height: 50px; rn text-align: center;rnrn.dock-container rn position: absolute;rn height: 50px;rn background: url(images/dock-bg2.gif);rn padding-left: 20px;rnrna.dock-item rn display: block;rn width: 40px;rn color: #000;rn position: absolute;rn top: 0px;rn text-align: center;rn text-decoration: none;rn font: bold 12px Arial, Helvetica, sans-serif;rnrn.dock-item img rn border: none; rn margin: 5px 10px 0px; rn width: 100%; rnrn.dock-item span rn display: none; rn padding-left: 20px;rnrnrn/* dock2 - bottom */rn#dock2 rn width: 100%;rn bottom: 0px;rn position: absolute;rn left: 0px;rnrn.dock-container2 rn position: absolute;rn height: 50px;rn background: url(images/dock-bg.gif);rn padding-left: 20px;rnrna.dock-item2 rn display: block; rn font: bold 12px Arial, Helvetica, sans-serif;rn width: 40px; rn color: #000; rn bottom: 0px; rn position: absolute;rn text-align: center;rn text-decoration: none;rnrn.dock-item2 span rn display: none;rn padding-left: 20px;rnrn.dock-item2 img rn border: none; rn margin: 5px 10px 0px; rn width: 100%; rnrn 论坛

没有更多推荐了,返回首页