jquery - css - 相对页眉和粘性页脚、动态内容、未知高度，都在一个具有响应宽度的容器中？

Question

我正在处理一个相对的页眉和粘性页脚，动态加载内容(有时是一个空的 div(高度未知)因此高度:100vh；)，所有内容都在一个响应式容器中，该容器可根据设备的宽度进行调整(宽度:100vw) ;) 最大宽度为 350 像素。

从那里开始，一些内容会动态加载到页眉上方，并应将页眉和内容向下推，但应将粘性页脚保持在原位。动态内容在溢出时应该滚动到页眉下方和页脚上方，因为两者都是半透明的。

已经尝试了各种(相对和绝对)组合..这是最接近的，例如:http://jsfiddle.net/9U2CU/5/ ..但是这个组合猜测动态内容的百分比高度，并且出现的内容在范围内格式不正确并且不会因为绝对定位而下插入态内容!？

需要对 CSS 进行哪些调整以符合规范？

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

Answer 1

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:
使用当前具有非常好的 xBrowser 支持的 calc():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 */
}

最后
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)"});
      }
   });
});

解释一下上面的美:
诀窍是为页眉和页脚设置固定高度，与使用 calc(100% - 88px) 相比，您可以获得所需空间的可滚动内容。

在 jQuery animate 上，您只需快速获取 Appearing Top 内容高度并将其应用于 jQuery 中的 calc() 魔法。