CSS

Question

I have this great solution from @RokoC.Buljan, 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, 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)"});
      }
   });
});

Stevo Perisic · Accepted Answer

Ok, go to https://github.com/rodneyrehm/viewport-units-buggyfill and download the script, than include the script in your <head>. After that run

window.viewportUnitsBuggyfill.init(true);

And voila! automagically it works!

link to jsbin: http://jsbin.com/yovoy/1/edit

CSS - Set height header/footer, with dynamic content..not working on osXsafari/iOSsafari? (jsBin)

Tags:

html

jquery

cross-browser

responsive-design

StackThis

1 Answers

Stevo Perisic

Recent Activity

Donate For Us