背景:在小屏幕上,当键盘向上并且页脚位于其顶部时,它会覆盖内容区域中的输入字段。 以下是要求(一些是从 [这里][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)长时,这个解决方案就会出现问题。在那种情况下,页脚会超出屏幕,但我希望它留在底部,而内容会出现滚动条并一直延伸到页脚的顶部。所以硬编码的最大高度内容是行不通的。我需要更有活力的东西。
最佳答案
您应该使用 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
关于html - CSS 粘性页脚,带有可滚动内容的页眉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27057298/