CSS粘性页脚，标题与可滚动内容 [英] CSS sticky footer, header with scrollable content

问题描述

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

Background: On small screens when the keypad is up and the footer sits on its top then it covers the input fields in the content area. Here are the requirements (some borrowed from [here][1]):

• 如果内容


• 如果内容比用户的视口高度高，则页脚应该从视图中消失并停留在页面底部，因为它




• 
  
• 必须在不需要JavaScript的情况下完成


• 它必须适用于Android 4.x，IOS> = 7.1 WebView，WP8.1 Web浏览器元素

• The footer should be visible if the content above it is shorter than the user’s viewport height.
• If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
• This must be done without JavaScript
• The header must be fixed at the top
• The most important part is only the content can have a scroll-bar if necessary
• It has to work on Android 4.x, IOS >=7.1 WebView, WP8.1 Web Browser element

这是我如何使内容可滚动现在同时将页脚放在底部。

This is how I make the content scrollable now while putting the footer to the bottom.

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%;
}

这是接近我的最终目标，但这个解决方案的问题出现时，内容比视口长。在这种情况下，页脚走出屏幕，但我想要它保持在底部，而内容获取滚动条，并延伸到页脚的顶部。因此，对内容的硬编码max-height将无法工作。

It's close to my final goal but the problem with this solution comes up when the content is longer than the viewport. In that case the footer goes out of the screen but I want it to stay at the bottom while the content gets a scroll-bar and stretches till the top of the footer. So a hard coded max-height on content won't work. I need something more dynamic.

推荐答案

您应该使用position：relative来确保页脚位置在内容正下方。

You should use position:relative to make sure the footers position is right under the content. if you use max-height to your content div in combination with overflow: auto the scrollbar appears.

这是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粘性页脚，标题与可滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！