CSS sticky footer, header with scrollable content

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.

Possible duplicate of [Sticky header and footer scrollable content](https://stackoverflow.com/questions/37887589/sticky-header-and-footer-scrollable-content) — Rob, Jul 16 '17 at 22:39

score -1 · Answer 1 · answered Nov 21 '14 at 09:06

-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

answered Nov 21 '14 at 09:06

Bas van der Hoeven

1
3

1

This is not what I want to achieve, sorry. I need the footer to sit on the bottom of the viewport nearly all the time. Only exception is when it covers the content area. In that case the footer has to go to the bottom of the page. – apreg Nov 21 '14 at 09:19

score -1 · Answer 2 · answered Jul 16 '17 at 22:31

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/

CSS sticky footer, header with scrollable content

Update1

2 Answers2

Linked