html - CSS 粘性页脚，带有可滚动内容的页眉

Question

背景:在小屏幕上，当键盘向上并且页脚位于其顶部时，它会覆盖内容区域中的输入字段。以下是要求(一些是从 [这里][1] 借来的):

• 如果页脚上方的内容短于用户的视口(viewport)高度，则页脚应该可见。
• 如果内容高于用户的视口(viewport)高度，则页脚应该从 View 中消失并自然地停留在页面底部。
• 这必须在没有 JavaScript 的情况下完成
• 标题必须固定在顶部
• 最重要的部分是如果需要的话内容可以有滚动条
• 它必须在 Android 4.x、IOS >=7.1 WebView、WP8.1 Web 浏览器元素上运行

这就是我在将页脚放在底部的同时使内容可滚动的方式。

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#wrapper {
    min-height: 100%;
    position: fixed;
}
header {
    height: 72px;
    background-color: red;
}
#content {
    overflow: auto;
    border-bottom: 1px solid red;
    margin-bottom: 50px;
}
footer {
    height: 50px;
    background-color: black;
    position: absolute;
    bottom: 0;
    top:auto;
    left:0px;
    width:100%;
}  

更新1

这是我目前能想到的。 http://jsfiddle.net/gfqew5un/3/

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#wrapper {
    min-height: 100%;
    position: fixed;
}
header {
    height: 72px;
    background-color: red;
}
#content {
    overflow: auto;
    border-bottom: 1px solid red;
    margin-bottom: 50px;
}
footer {
    height: 50px;
    background-color: black;
    position: absolute;
    bottom: 0;
    top:auto;
    left:0px;
    width:100%;
}

它接近我的最终目标，但是当内容比视口(viewport)长时，这个解决方案就会出现问题。在那种情况下，页脚会超出屏幕，但我希望它留在底部，而内容会出现滚动条并一直延伸到页脚的顶部。所以硬编码的最大高度内容是行不通的。我需要更有活力的东西。

Answer 1

您应该使用 position:relative 来确保页脚位置在内容的正下方。如果您将 max-height 与 overflow: auto 结合使用到您的内容 div，则会出现滚动条。

这是 CSS 代码:

header{
height: 72px;
background-color: red;
position: relative;
left: 0px;
right:0px;
overflow: visible;  
}
#content{   
overflow:auto;
position: relative;
max-height:200px;
}

footer{
height: 50px;
background-color: black;
position: relative;
}

链接到 JSFiddle