Content Scrolling on Mobile Page with Fixed Header/Footer

Content scrolling on mobile page with fixed header/footer

Here you are:

http://jsfiddle.net/VNVqs/3/

I just removed the position: absolute to the scrolling part (wrapper and scroll-content), and added some padding to the wrapper in order to let the first and last item not being under header and footer.

Basically, the trick is done by using position: fixed only on header and footer, and let the rest of the page to scroll as a normal page, without using overflow: auto on a specific fixed-height element. Doing this way, the only problem is that the first lines of your content will be always under the fixed-positioned header (and last ones under the footer), but you can fix this by applying some padding on the content wrapper, as much as header (and footer) height. You got it?

Header and footer with fixed position while content is scrollable?

The easiest fix for this is to add padding equivalent to the height of your static header and footer:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

JSfiddle

Fixed header, footer with scrollable content

Something like this

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

Sticky header and footer scrollable content

Approach 1 - flexbox

It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.

jsFiddle

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;  display: flex;  flex-direction: column;}.header, .footer {  background: silver;}.content {  flex: 1;  overflow: auto;  background: pink;}

<div class="wrapper">  <div class="header">Header</div>  <div class="content">    <div style="height:1000px;">Content</div>  </div>  <div class="footer">Footer</div></div>

Flexbox with fixed header and footer and scrollable content

You can do something like this:

html, body {  margin: 0;  height: 100%; /* can also use viewport units (height: 100vh) */}
#container {  display: flex; /* displays flex-items (children) inline */  flex-direction: column; /* stacks them vertically */  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */}
main {  flex: 1; /* takes the remaining height of the "container" div */  overflow: auto; /* to scroll just the "main" div */}
section {  height: 100%; /* takes the visible area of the "main" div */  overflow: auto; /* recommended */  border-bottom: 1px solid;  background: lightgreen;}
header {background: #f88}section:last-child {border: none}footer {background: lightblue}

<div id="container">  <header>top</header>  <main>    <section>1st</section>    <section>2nd</section>    <section>3rd<br>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>    </section>    <section>4th</section>    <section>5th</section>  </main>  <footer>bottom</footer></div>

Fixed header and footer with scrolling middle in Web-app on iOS 7.1.2

I went back to one of the relevant sources, the simple iScroll example (which works as expected, even in Safari on iOS 7.1.2), and studied the code, looking for significant code differences between that demo and mine. I discovered that the meta viewport tag had a different value. The solution was actually quite simple, and at least partly, meaningful.

The solution was to change

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

That is, to remove the height=device-height specification, which apparently is interpreted differently in Safari on iOS 7.1.2 and other, newer browsers.

Content Scrolling on Mobile Page with Fixed Header/Footer