只有当内容溢出视口时，粘滞的页脚

Question

我想要一个仅在内容溢出视口时才内联的页脚元素，在这种情况下，它变得粘滞，底部固定。用例是在长数据网格上始终可见一些功能按钮。

我记得很多年前用黑客做这件事，但我忘了:)我知道它可以用Javascript来完成，但有没有更简单的方法来做到这一点只有CSS？

当含量大于视域

------< viewport top 
header 
content 
[footer, inline] 


------ < viewport bottom 

当内容溢出视

------< viewport top 
header 
content 
content 
content 
[footer, sticky] 
------ < viewport bottom 
content 
content 
content 

Answer 1

较短如何使用最大高度和钙？页眉和页脚需要有一个固定的宽度：

http://codepen.io/jlowcs/pen/OPBGjx

HTML：

<div class="header"></div> 
<div class="content"> 
    content<br> 
    [...] 
    content<br> 
</div> 
<div class="footer"></div> 

CSS：

html, body { 
    margin: 0; 
    height: 100%; 
} 

.header { 
    height: 150px; 
    background-color: blue; 
} 
.footer { 
    height: 100px; 
    background-color: green; 
} 
.content { 
    max-height: calc(100% - 150px - 100px); 
    overflow: auto; 
}