footer.php 固定底部,让footer固定在页面（视口）底部

让footer固定在页面(视口)底部(CSS-Sticky-Footer)

这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现，没有令人讨厌的hacks。所以这就能在所有主流浏览器上正常运行(甚至包括IE5和IE6)。

如何通过用CSS让Footer固定在页面顶部。

在样式表单里添加下面几行CSS代码。.wrapper 的负外边距与 .footer 和 .push 的高度相等。负外边距应该与footer的整体高度相等(包括padding、border)。

* {

margin: 0;

}

html, body {

height: 100%;

}

.wrapper {

min-height: 100%;

height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */

height: 100%;

margin: 0 auto -4em;

}

.footer, .push {

height: 4em;

}

按照此 HTML 结构。没有内容会超出 .wrapper 和 .footer 的 div 标签，除非超出内容是通过CSS的绝对定位。另外，.push 的 div 标签也不应该含有内容，毕竟它是作为一个将footer“推”下去的隐藏元素。否则会与footer的内容重叠。

Your website content here.

多列布局(通过浮动)

为 .push div 添加 clear 属性。

.footer, .push {

clear: both;

}

height:auto!important; 和 height:100%;属性

这两个属性是为了在IE6及以下的浏览器实现 min-height 效果(min-height只兼容IE7及以上)。所以，当你不需要考虑IE6时，可把这两个属性删除。

因为IE6是考虑元素内容的尺寸，而不是元素本身尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是在IE6中，如果元素内容太大，则整个元素就会扩展(包括宽和高)。即设定的width表现得像min-width。

footer.php 固定底部,让footer固定在页面（视口）底部相关推荐

如何将footer标签固定在底部_如何让footer标签置于页面最底部
这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...
如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...
flex 底部固定_小猿圈网站页面底部固定的方法
网络发展到了今天,很多朋友对于网站已经不陌生了,但是当我们看网页时你注意到网站的底部了吗?虽然很少人会注意到他,但是如果不在底部的话,会很难看,今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法 ...
把底部导航栏固定在底部
在一个老项目中,突然发现它底下的footer居然是用js去固定的,在页面加载后和窗体变动的时,去判定它位置是否超过界面总高度,以此添加position: fixed的css来固定在最底部. 这种方式既 ...
[JavaScript]让footer总是停留在页面的底部(footer all the way at the bottom of the page)
在网页的底部总是保留着公司的版本信息,如何是这部分信息来实现呢?下面的一段javascript演示了如何让footer总是停留在页面的底部.这段代码我在实际使用的时候不是特别的完美,在包含有其他jav ...
Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)
footer 置于页面的底部利用绝对定位 /* 文件目录:src/layouts/Defaults.vue */.footer {color: #c5c5c5;position: absolute; ...
footer属性css,CSS基础-footer元素始终粘在浏览器底部的四种方法
本文介绍底部footer元素如何始终粘在浏览器底部.当内容container足够多.可以撑开一屏的时候,底部footer紧跟在内容container后边:而内容container不够多.不足以撑开一屏 ...
Html5 学习笔记【PC固定布局】实战5 咨询页面侧栏
最终效果图: 提出公共页脚和导航部分: 新建infomatino.html (旅游咨询)页面 <!DOCTYPE html> <html lang="zh-cn" ...
html5中footer元素的作用,html5 footer标签怎么用？footer标签的用法实例
本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧首先我们先看 ...
php如何写footer,html5 footer标签怎么用？footer标签的用法实例
本篇文章主要的为大家介绍了关于HTML5 footer标签的使用方法,有布局之类的知识,纯html编辑,不需要会css,好了,现在让我们来看看这篇关于html5 footer标签的文章吧首先我们先看 ...

footer.php 固定底部,让footer固定在页面（视口）底部

footer.php 固定底部,让footer固定在页面（视口）底部相关推荐

最新文章

热门文章