CSS sticky footer, header with scrollable content - html

Question

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]):
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
This is what I could come up with so far.
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%;
}
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.

Answer 1

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.
This is the CSS code:
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;
}
Link to JSFiddle

Answer 2

You can easily achieve this effect using flex option from 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/