CSS Sticky Footer, Header With Scrollable Content

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

Solution 1:

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/

Solution 2:

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