如何在纯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方法。
