Css 带滚动溢出的DIV高度动态

我有一个包装器div，它的高度是页面的100%，在包装器中我有一个动态的div数。 我希望包装器div中的最后一个div填充剩余的空间

  html {
    height: 100%;
}
body {
    height: 100%;
}
#wrapper {
    height: 100%;
    width: 200px;
    border: solid 1px #FF0;
}
#wrapper .child {
    border: solid 1px #F00;
    height: 40px;
}
#wrapper .last {
    height: 100%;
    border: solid 1px #000;
}

正如您在示例中看到的：当我将最后一个div的高度设置为100%时，它会溢出包装器div

这就是我努力实现的目标： 您可以添加：

overflow:auto; 

到主分区

这就是你的意思吗

背景

#wrapper {
    overflow:auto;
...

---

实现您的预期输出

使用

溢出：滚动将其设置为
内联块

并卸下高度

#wrapper{

    display:inline-block;
    overflow:scroll;

}

内联块
占用它所需的所有空间（尽可能多）。
我通常使用一个简单的jQuery函数在页面初始化时运行，以获得此类功能：

function set_div_height() {

    el_height = (
        ($(window).height()) - ($('.div1').height() + $('.div2').height())
    );
    $('.div3').height(el_height); 

}

您所描述的内容显然像是一个
。您可以尝试模拟它：

添加
显示：表格到
#包装器

添加
显示：表格行到
#包装器div


此解决方案的缺点是：


最后一个div必须有一个内容
不能直接在所有
#包装器div
上使用边框

这是一个令人讨厌的解决办法，但我现在唯一能想到的办法

我宁愿看一看您正试图实现的确切设计，并为您的问题找到更好的解决方法。
您必须动态执行，因为您希望在不同的屏幕之间进行调整。我希望使用jQuery来实现这一点。
注意车身边缘和边框

html, body {
    padding: 0;
    margin: 0;
    height:100%;
}

  $(document).ready(function () {
      div3_height = $(window).height() - ($(".child").outerHeight(true) * 2);
      $("#wrapper .last").css("height", div3_height - 4);
  });

你忘记了边界：-）有趣的。。。在获取元素高度时，jQuery没有考虑到这一点？我将如何以编程方式解释它们？在计算高度时，您需要注意它。毕竟，像素可以渲染滚动条。我通常以静态方式计算它们，在这种情况下，对于1 div，这意味着
2px
。有关高度主题的更多信息，请参阅。这是我最终使用的解决方案，因为它不需要JS。这是我更新的脚本，我只希望最后一个div有可滚动的内容，而不是主包装器。这就是我最终使用的解决方案。但是谢谢你的建议