[I have this great solution from @RokoC.Buljan](https://stackoverflow.com/questions/24215541/css-relative-header-and-sticky-footer-dynamic-content-unknown-height-all-in), but it only works on chrome & firefox..on safari, the content section does not scroll and the footer seems to stick to the bottom of the content, rendering it inaccessible..

Is there any way to remedy this for Safari/iOSsafari? ..or an alt solution that's cross-browser compatible?

<http://jsbin.com/negin/9/edit>

HTML:

```
<div id="view">
  <div id="appear"> Content that appears </div>
  <div id="header"> Header </div>
  <div id="content"> <h1>Content</h1> <p>Lorem ipsum...</p> </div>
  <div id="footer"> Footer </div>
</div>

```

CSS (using [calc for dynamic seems supported](http://caniuse.com/#search=calc), but maybe this is the issue?):

```
#view {
  overflow: hidden;           /* NO SCROLLBARS */
  margin: 0 auto;
  background-color: #000;
  color:#fff;

  width: 100vw;
  max-width: 350px;
  height: 100vh;
}
#appear{
  display:none;
}
#header,
#footer {
  height: 44px;               /* note this */
  background-color: #555;
}
#content {
  overflow-y: scroll;         /* SCROLLBARS !!!*/
  height: calc(100% - 88px);  /* 44+44 = 88px */
}

```

jQuery (setting a fixed height to header and to Footer, using calc(100% - 88px) for the scrollable content, and having the appear section slidedown from above thanks to calc):

```
$("#view").on("click", "#header", function () {
  var $appear = $('#appear');
  var io = this.io ^= 1; // Toggler

  $appear.show();               // Temporarily show
  var animH = $appear.height(); // Get height and
  if(io) $appear.hide();        // fast hide.
  $appear.slideToggle();        // Now do it with animation

  $('#content').animate({       // Animate content height
      height: (io?"-=":"+=")+animH
    },{
      step: function() {
        $(this).css("overflow-y", "scroll");
      },
      complete : function(){
        var h = 88 + (io?animH:0); // header+footer = 88px
        $(this).css({height: "calc(100% - "+ h +"px)"});
      }
   });
});

```