Question

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

如果页脚上方的内容短于用户的视口高度，则应该可以看到页脚。
如果内容高于用户的视口高度，那么页脚应该从视图中消失并停留在页面底部，就像它自然一样。
必须在没有JavaScript的情况下完成
标题必须固定在顶部
最重要的部分是只有内容可以有必要的滚动条
它必须适用于Android 4.x，IOS＆gt; = 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

您可以使用CSS3中的flex选项轻松实现此效果。

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

您应该使用position：relative来确保页脚位置在内容下方。如果你对内容div使用max-height并结合overflow：auto会出现滚动条。

这是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粘性页脚，带有可滚动内容的标题

UPDATE1

2 个答案: