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

Lemon_95 发布于2019-08-28 18:26 / 722人阅读

摘要：让固定在页面视口底部这是一个让网站固定在浏览器页面内容小于浏览器高度时页面底部的技巧。如何通过用让固定在页面顶部。负外边距应该与的整体高度相等包括。没有内容会超出和的标签，除非超出内容是通过的绝对定位。

让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.
            
        
        
            Copyright (c) 2008

多列布局（通过浮动）

为 .push div 添加 clear 属性。

.footer, .push {
    clear: both;
}

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

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

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

完整代码：https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS%20Sticky%20Footer.html
参考：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

GPU云服务器云服务器 footer页面底部固定页面底部页面底部 php位于页面底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111236.html

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

摘要：让固定在页面视口底部这是一个让网站固定在浏览器页面内容小于浏览器高度时页面底部的技巧。如何通过用让固定在页面顶部。负外边距应该与的整体高度相等包括。没有内容会超出和的标签，除非超出内容是通过的绝对定位。让footer固定在页面（视口）底部（CSS-Sticky-Footer）这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现...

liaosilzu2007 2019-08-01 14:57 评论0 收藏0
Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

张汉庆 2019-08-30 11:03 评论0 收藏0
Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

PrototypeZ 2019-08-02 15:13 评论0 收藏0
紧贴底部的页脚

摘要：这样就可以了我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。后记上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨参考资料总在底部的页脚揭秘前言在写前端页面时，经常会遇到这种情况：有一个具有块级样式的页脚，当页面内容足够长时它一切正常；有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来；页脚不能像我们期望中那样紧贴在视口的最底部，而是紧跟在内容的下方。那么...

greatwhole 2019-08-29 12:45 评论0 收藏0
css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0