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

我正在处理相对页眉和粘性页脚，动态加载内容（有时为空div（未知高度），因此高度为100vh；），所有内容都位于响应容器内，可根据设备的宽度（宽度：100vw；）进行调整，最大宽度为350px

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

我尝试过各种组合（相对和绝对）…这里有一个最接近的组合，例如：。。但是这种组合猜测了动态内容的百分比高度，并且显示的内容在范围内的格式不正确，并且由于绝对位置，不会向下推动态内容

需要对CSS进行哪些调整以考虑规格

HTML

jQuery

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

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>

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

最后
jQuery:

<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>

$("#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上，您只需快速获得出现的顶部内容高度，并将其应用于jQuery中的

calc（）

magic。

问题是什么？@RokoC.Buljan什么样的css可以使所有内容保持原位？只有当#出现切换时才会移动的页眉，动态内容在页眉和页脚后面滚动，所有内容都在一个容器中，该容器响应设备的宽度高达350px，并且是设备的全高…（更正的详细信息）我已经读了几遍你的问题，坦率地说，我不知道你在找什么。。。首先，您在标题中声明“css-相对页眉和粘性页脚”，然后突然出现一个“我正在处理固定页眉+页脚，…”

fixed

？什么样的页面应该有350px的最大宽度？这是一个边栏小部件？（出于好奇问。）@RokoC.Buljan请原谅这些不一致之处。。下面是一个更接近的示例，但是这种组合猜测了动态内容的高度百分比，并且显示的内容在范围中的格式不正确，并且由于绝对值的原因，不会向下推动态内容positioning@RokoC.Buljan非常感谢你看了这篇文章真的很感谢，真的incredible@StackThis谢谢！：）不客气！上面的代码唯一可能的问题是，当前（现在）页眉和页脚需要一个固定的高度，但对于移动设计，我希望这不是什么大问题，因为通常页眉和页脚的高度不会改变（大多数情况下：D）。这太完美了！页眉和页脚已设置高度。。非常鼓舞人心的代码@StackThis我已经在2个Androids（4,3和2.2）上测试过了，它只在Chrome和Firefox移动浏览器中工作。。。如果您对设备使用

meta

和一些额外的工作，默认浏览器可能会有一些问题可以解决。我的意思是，问题是整个页面是可滚动的。没那么糟糕。Firefox和Chrome是OK@StackThis修复了移动Firefox中的一些小错误。编辑了我的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)"});
      }
   });
});