CSS粘的页脚，可滚动内容头(CSS sticky footer, header with scro

背景：在小屏幕上时，键盘启动和页脚坐在它的顶部，然后覆盖在内容区域输入字段。这里有要求（有的从[这里]借来[1]）：

页脚应该是可见的，如果它上面的内容是不是用户的视口的高度短。
如果内容比用户的视口的高度高，那么页脚应该从视图和休息在页面的底部消失，因为它自然会。
这必须不使用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%;
}

UPDATE1

这是我能想出这么远。 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%;
}

这是接近我的最终目标，但这个解决方案的问题出现了，当含量大于视域更长。在这种情况下，页脚熄灭屏幕，但我希望它留在底部，而内容获取滚动条和拉伸，直到页脚的顶部。因此，对内容的硬编码的最大高度将无法正常工作。我需要的东西更有活力。

Answer 1:

您可以使用轻松达到这种效果flex从CSS3选择。

HTML：

<header>
    <h1>Your header</h1>
</header>
<div id="content-wrapper">
    <div id="content">
        Lorem ipsum dolor
    </div>
    <footer>
        footer content
    </footer>
</div>

CSS：

html {
  height: 100%
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}

#content {
  flex: 1;
}
footer {
  height: 35px;
  padding-top: 20px;
}

https://jsfiddle.net/puybgmps/

Answer 2:

您应该使用的位置是：相对于确保页脚位置是右下的内容。如果结合使用最大高度到您的内容分度，溢出：自动出现滚动条。

这是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

文章来源: CSS sticky footer, header with scrollable content