css - relative header and sticky footer, dynamic content, unknown height, all in a container with responsive width?

Question

Am working on a relative header and sticky footer, with dynamically loaded content (sometimes an empty div (unknown height) hence height: 100vh;), all within a responsive container that adjusts to the width of the device (width: 100vw;) up to a max-width of 350px.

From there, some content loads dynamically above the header and should push down the header and the content, but should keep the sticky footer in place. The dynamic content, when it overflows, should scroll out below the header and above the footer because both are semi-transparent.

Have tried all sorts of combinations of (relative and absolute)..here's the closest one, for example: http://jsfiddle.net/9U2CU/5/.. but this combination guesses the percentage height of the dynamic content, and the content that appears is incorrectly formatted in scope and does not push down the dynamic-content because of the absolute positioning!?

What adjustments need to be made to the CSS to account for the specs?

HTML

<div id="view">

    <div id="appear" style="display:none;">Content that appears</div>

    <div id="header">Some Buttons</div>
    <div id="dynamic-content"></div>
    <div id="footer">Some Buttons</div>

</div>

CSS

#view {
  position: relative;
  height: 100%;
  width: 100vw;
  max-width: 350px;
  overflow-y: auto;
  height: 100vh;
  display: block;
  margin: 0 auto;
  background-color: #fff;
}
#header {
  position: relative;
  height: 44px;
  width: 100%;
  background-color: rgba(255, 255, 255, .5);
}
#dynamic-content {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #999;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36px;
  background-color: rgba(255, 255, 255, .5);
}

jQuery

$(document).on("click", "#header", function () {
    $('#appear').slideToggle();
});

@RokoC.Buljan what css will keep everything in place? a header that moves only when the #appear toggles, dynamic content that scrolls behind the header and the footer, all in a container that responds to the width of the device up to 350px, and is full-height of the device..(corrected details) — StackThis
I've read a couple of times your question and I have frankly no clue what you're after... first you state in your title "css - relative header and sticky footer" and than suddenly A"m working on a fixed header+footer,..." fixed ? Also what kind of page should have 350px max width? This is a sidebar widget? (asking just out of curiosity.) — Roko C. Buljan
@RokoC.Buljan Pardon the inconsistencies.. Here's a closer example jsfiddle.net/9U2CU/5, but this combination guesses the percentage height of the dynamic content, and the content that appears is incorrectly formatted in scope and does not push down the dynamic-content because of the absolute positioning — StackThis

Roko C. Buljan Roko C. Buljan · Accepted Answer · 2014-06-14T02:47:17

jsBin demo

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>

CSS3:
using calc() which currently has a very good xBrowser support: http://caniuse.com/#search=calc

#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 */
}

and finally
jQuery:

$("#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)"});
      }
   });
});

To explain the beauty above:
the trick is to set a fixed height to header and to Footer, than using calc(100% - 88px) for the scrollable content you get the needed space.

On jQuery animate you just quickly get the Appearing Top content height and apply it to the calc() magic in jQuery.

css - relative header and sticky footer, dynamic content, unknown height, all in a container with responsive width?

1 Answers