如何在纯CSS中定义可变高度的粘性页脚?

这里要注意的关键是页脚的高度不会被固定,而是会随其内容而变化。

当我说“粘性页脚”时,我使用它来表示我所理解的“一个不会高于视口底部的页脚”的常见定义,但是如果有足够的内容,它将被隐藏,直到用户滚动下到足以看到它。“

另请注意,我不需要支持传统的浏览器。 如果CSS display: table和相关属性帮助这里,他们是公平的游戏。

所有其他的解决scheme都过时了,或者使用JavaScript或者table黑客。

随着CSS flex模型的出现,解决高度变高的粘性页脚问题变得非常容易:虽然大多数人都知道在水平方向上布置内容,但是Flexbox实际上也适用于垂直布局问题。 所有你需要做的就是将垂直部分包裹在柔性容器中,并select你想要展开的部分。 他们会自动占用其容器中的所有可用空间。

注意标记和CSS是多么简单。 没有表黑客或任何东西。

所有主stream浏览器以及IE11 +都支持 Flex模型,尽pipe我的IE并没有正确地呈现这个代码片段。

 html, body { height: 100%; margin: 0; padding: 0; /* to avoid scrollbars */ } #wrapper { display: flex; /* use the flex model */ min-height: 100%; flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ } #header { background: yellow; height: 100px; /* can be variable as well */ } #body { flex: 1; border: 1px solid orange; } #footer{ background: lime; } 
 <div id="wrapper"> <div id="header">Title</div> <div id="body">Body</div> <div id="footer"> Footer<br/> of<br/> variable<br/> height<br/> </div> </div> 

你完全可以在纯CSS中做到这一点。 点击链接。

这个概念使用display: table-cell组织你的页面部分而不是正常的display: block

HTML

 <body class="Frame"> <header class="Row"><h1>Catchy header</h1></header> <section class="Row Expand"><h2>Awesome content</h2></section> <footer class="Row"><h3>Sticky footer</h3></footer> </body> 

CSS

 .Frame { display: table; table-layout: fixed; height: 100%; width: 100%; } .Row { display: table-row; height: 1px; } .Row.Expand { height: auto; } 

您可以使用以下方法将页脚粘贴到视口的底部:

 position: fixed; bottom: 0; 

不过,即使有内容,也会显示。

为了防止这种情况,您将需要一些JavaScript:

 (window.onscroll = function() { var foot = document.getElementById('footer'); foot.style.position = "static"; if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight) foot.style.position = "fixed"; })(); 

(...)();封装使onscroll函数在页面加载时被调用一次,因为这也是需要的)
(上面的函数是未经testing的,但应该工作 – 如果没有,让我知道,我会做一个实际的testing页)

页脚的可变高度会导致轻微的问题,但是以下内容应该可以工作:

 <html> <head> <style type="text/css"> html { height: 100%; } body { min-height: 100%; } .container { min-height: 100%; position: relative; } .content { padding-bottom: 200px; } .footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; } </style> </head> <body> <div class="container"> <div class="content"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="footer"> <p>This is my footer.</p> <p>This is another line of my footer.</p> </div> </div> </body> </html> 

.content底部的填充表示页脚不会与内容重叠。 但是,由于您的页脚将是可变大小,我会使用JavaScript来dynamic设置内容的底部填充一次页面加载或每次更改页脚的高度:

 <script type="text/javascript"> $(function() { $(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px'); }); </script> 

我知道你说纯粹的CSS,但我不认为有一个方法可变的高度和隐藏粘滞条件。 我认为这是最less的JavaScript方法。