php架在底部页面,将页脚固定在页面底部的CSS实战

页脚的位置问题

网页的页脚(footer)，也就是通常用来放置帮助链接及版权信息的地方。页脚自然是应该位于页面底部的，但依照一般的做法，如果位于页脚之前的网页内容比较少，或者说使用了一个垂直分辨率较大的显示器，就有可能出现页脚看起来不在页面底部的情况，如下图。

由于页脚基本上是一个网站的所有页面公用的部分，不同页面的内容量有所差异，因此确实有可能某些页面内容不够而出现这样的问题。另外，尤其是包含了底色的页脚，发生这种问题会很影响美观。

所以，我们希望页脚能够无论网页内容量多少，都准确地位于底部。

固定页脚到底部的方法

绝对定位可行吗？

也许有人想到过把页脚设置为position:fixed，然后定位在底部。先不考虑不支持这个属性值的IE6，从效果上说，如果网页本身内容就很充足，这样的写法就会让页脚一开始就出现在浏览器的底部，而在滚动网页时，页脚会一直保持原位置。这样的效果，显然对大部分的网站都是不适宜的。

可以想见，我们需要的效果是：

网页内容较多时，在滚动到底部的时候才看到位于最下方的页脚。

网页内容较少时，页脚仍然位于整个页面的最下方，其余部分留白。

常规、简单的实现方法

CSS Sticky Footer提供了这个固定页脚在底部的合理的实现方法。不过一方面这是一个英文站点，另一方面它所提供的写法还存在些许可以改善的地方，所以本文会参考它的内容，给出一个合理的实现方法。

首先需要这样一个html结构：

XML/HTML Code复制内容到剪贴板

php架在底部页面,将页脚固定在页面底部的CSS实战相关推荐

如何将页脚固定在页面底部
感觉有些繁琐.目前简单的,是在上continer中使用min-height属性,当然没有测试兼容性. -------2016-5-9 16:17:51-- source:如何将页脚固定在页面底部
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码 <div class="main"><div class="main-box&quo ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
html固定页脚布局及样式,html页脚固定在底部的方法
html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } .container, .jumbotron { min-he ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
html5页脚最低下,页面底部或内容的页脚，以较低者为准
Ryan Fait的粘性页脚非常好,但我发现它的基本结构缺乏*. Flexbox版本如果你足够幸运,你可以使用flexbox而不需要支持旧的浏览器,粘性页脚变得非常简单,并支持动态大小的页脚. 使用 ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
将页脚保持在页面的底部——Javascript+Css实现
功能:无论将浏览器拖大或拉小,将页脚DIV块保持在页面的底部 1.将Javascript代码和DIV/CSS代码写在同一个文件里: <!DOCTYPE html PUBLIC "-// ...

php架在底部页面,将页脚固定在页面底部的CSS实战

php架在底部页面,将页脚固定在页面底部的CSS实战相关推荐

最新文章

热门文章