blocks|key|400954|text|摘自CSS+tricks|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|400955|400956|粘性页脚的用途是“粘”在浏览器窗口的底部。但并不总是这样，如果页面上有足够的内容将页脚压得更低，它仍然会这样做。但是，如果页面上的内容很短，浏览器窗口的底部仍会挂有粘性页脚。|blockquote|400957|400958|400959|这里有一个关于粘性页脚的清晰概念：https://css-tricks.com/couple-takes-sticky-footer/和http://css-tricks.com/sticky-footer/|400960|下面是一个例子：https://getbootstrap.com/docs/4.0/examples/sticky-footer/|400961|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/couple-takes-sticky-footer/|1|2|http://css-tricks.com/sticky-footer/|3|https://getbootstrap.com/docs/4.0/examples/sticky-footer/^0|2|A|0|0|0|0|0|0|H|1E|1|1W|10|2|0|8|1L|3|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|-4|5|6|7|14|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|15|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]]|C|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|N|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|U]]|W|$5|Q|R|S|C|$T|X]]|Y|$5|Q|R|S|C|$T|Z]]]]

Taken from <a href="https://css-tricks.com/couple-takes-sticky-footer/" rel="nofollow noreferrer">CSS tricks</a>:

<blockquote>
 The purpose of a sticky footer is that it "sticks" to the bottom of
 the browser window. But not always, if there is enough content on the
 page to push the footer lower, it still does that. But if the content
 on the page is short, a sticky footer will still hang to the bottom of
 the browser window.
</blockquote>

Here is a clear idea of what a Sticky footer is: <a href="https://css-tricks.com/couple-takes-sticky-footer/" rel="nofollow noreferrer">https://css-tricks.com/couple-takes-sticky-footer/</a>
And 
<a href="http://css-tricks.com/sticky-footer/" rel="nofollow noreferrer">http://css-tricks.com/sticky-footer/</a>

And an example: <a href="https://getbootstrap.com/docs/4.0/examples/sticky-footer/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/examples/sticky-footer/</a>

blocks|key|401127|text|来自CSS+Tricks，|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|401128|401129|粘性页脚的用途是“粘”在浏览器窗口的底部。但并不总是这样，如果页面上有足够的内容将页脚压得更低，它仍然会这样做。但是，如果页面上的内容很短，浏览器窗口的底部仍会挂有粘性页脚。|blockquote|401130|401131|401132|​|401133|📷|atomic|401134|401135|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/couple-takes-sticky-footer/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0bbbf8cbc9a68355648c35a5ae5be3a4.png|imageAlt^0|2|A|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|-4|5|6|7|17|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|18|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|O|3|K|5|6|7|1G|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|Y|T|Z|C|$10|11|12|-4]]]]

From <a href="https://css-tricks.com/couple-takes-sticky-footer/" rel="nofollow noreferrer">CSS Tricks</a>,

<blockquote>
 The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
</blockquote>

<a href="https://i.stack.imgur.com/OzoUa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OzoUa.png" alt="Sticky Footer"></a>

blocks|key|1551939|text|我猜粘性页脚就是固定在页面底部的页脚，不管内容有多长。比如this。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1551940|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cssplay.co.uk/layouts/basics2.html^0|T|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I would guess a sticky footer is one that stays fixed to the bottom of a page, regardless of the length of content. Like <a href="http://www.cssplay.co.uk/layouts/basics2.html" rel="nofollow">this</a>.

blocks|key|400771|text|我假设粘性页脚总是停留在屏幕上的同一位置。在什么背景下？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|400772|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I assume a sticky footer stays at the same place on a screen all the time. In what context?

blocks|key|2468342|text|粘性页脚锚定在浏览器视图端口的底部，而不是整个页面的底部。当页面滚动时，它将保持相对于浏览器底部的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2468343|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

A sticky footer is anchored to the bottom of the browser view port, as opposed to the bottom of the entire page. It retains its position relative to the bottom of the browser as the page scrolls.

blocks|key|4064840|text|粘性页脚将始终保持在屏幕上的固定位置，无论您滚动或not.It将始终在该特定位置可见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4064841|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

the sticky footer will always remain at a fixed position on the screen no matter you scroll or not.It will be visible all the time at that specific place.

blocks|key|1549809|text|你可以缩小这个页面：http://maedeh.arianblog.com/和http://stackoverflow.com，然后比较它们的页脚！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1549810|希望它能帮上忙！|1549811|entityMap|0|LINK|mutability|MUTABLE|url|http://maedeh.arianblog.com/|1|http://stackoverflow.com/^0|A|S|0|13|O|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

You can zoom out this page : <a href="http://maedeh.arianblog.com/" rel="nofollow">http://maedeh.arianblog.com/</a> and also <a href="http://stackoverflow.com">http://stackoverflow.com</a> and compare what happens for their footers!

hope it helps!

blocks|key|4065004|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4065005|这段CSS粘性页脚代码将网站的页脚推到浏览器窗口的底部。它是有效的CSS和HTML，没有令人讨厌的黑客攻击，所以它可以在所有主流浏览器上运行(甚至现在已经不存在的IE5和IE6)。|blockquote|4065006|4065007|4065008|++++++++How+to+use+the+CSS+Sticky+Footer+on+your+website,|code-block|syntax|javascript|4065009|4065010|将以下几行CSS添加到样式表中。.wrapper中页边距的负值与.footer和.push的高度相同。负边距应始终等于页脚的完整高度(包括您可能添加的任何填充或边框)。遵循下面的HTML结构。任何内容都不能在.wrapper和CSS+div标签之外，除非它绝对是用.footer定位的。在.push+div中也不应该有任何内容，因为它是一个隐藏元素，它会“下推”页脚，这样它就不会与任何内容重叠。|4065011|4065012|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|Q|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|R|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|S|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|T|7|@]|8|@]|9|$]]|$1|F|3|G|4|H|6|U|7|@]|8|@]|9|$I|J]]|$1|K|3|-4|4|5|6|V|7|@]|8|@]|9|$]]|$1|L|3|M|4|C|6|W|7|@]|8|@]|9|$]]|$1|N|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|O|3|-4|4|5|6|Y|7|@]|8|@]|9|$]]]|P|$]]

<blockquote>
 This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6).
</blockquote>

<pre><code> How to use the CSS Sticky Footer on your website,
</code></pre>

<blockquote>
 Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
 Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
</blockquote>

This question is a total noob one, but I can't get the difference between a normal footer and a sticky footer.

What is a sticky footer?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

这个问题完全是新手的问题，但是我不能区分正常的页脚和粘性的页脚。

问什么是粘性页脚？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是粘性页脚？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是粘性页脚？
EN