Jquery 具有页眉/正文/页脚且正文可滚动的可调整大小的DIV容器

我错过了一些非常简单的东西，但是我无法让这个可调整大小的

div

容器按我想要的方式工作

示例如下：

我的问题是主体没有溢出并触发滚动条。调整容器大小时，

div

的内容大小保持不变

+------------------------------+
| HEADER                       |
+------------------------------+
| BODY                       |X|
|                            |-|
|                            | |
|                            | |
|                            | |
|                            | |
|                            | |
|                            | |
|                            | |
|                            |-|
|                            |X|
+------------------------------+
| FOOTER                       |
+------------------------------+

上面的插图说明了我想要什么

---

我想创建一个可调整大小的

div

，其中正文内容可以滚动，但页眉/页脚仍然可见

如果我理解正确，你想要一个中间区域，可以滚动吗

大多数情况下，这可能有点棘手！您需要使该区域100%为主体元素的高度减去页眉和页脚的高度

为此，我喜欢以下解决方案：

div {
  overflow:auto;
  border:solid;
  margin:100px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;

}

在这里，绝对位置为元素提供100%的高度，边距扣除的高度等于您希望为页脚和页眉保留的空间

请参见演示：

---

我通过添加调整大小处理程序解决了您的问题：

$(".filter-form").resizable().resize(function()
{
    var bodyHeight = $(this).height() - 40;

    $('.filter-body').css('height', bodyHeight + "px");
});

---

您需要指定初始高度。此外，主体应设置为调整大小：两个（或垂直，如果您愿意）

下面是我的示例。请注意，javascript的可调整大小也被注释掉了。

---

调整大小处理程序现在不在父级周围

.filter-form
{
    border: 1px solid black;
}

.filter-body
{
    overflow-x: hidden;
    overflow-y: auto;
    resize: both;
    height: 200px;
}