Question

我错过了一些非常简单的事情，但是我无法让这个可调整大小的div容器以我想要的方式工作。

此处示例：http://jsfiddle.net/thinkingmedia/yrJre/

我的问题是身体没有溢出并触发滚动条。调整容器大小时，div的内容大小保持不变。

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

以上插图我想要的内容。

我想创建一个可调整大小的div，其中正文内容可滚动，但页眉/页脚仍然可见。

Answer 1

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

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

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

http://jsfiddle.net/yrJre/3/

Answer 2

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

这个，大部分时间都有点棘手！您需要将该区域100％设置为主体元素的高度减去页眉的高度和页脚的高度。

为了解决这个问题，我喜欢以下解决方案：

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

}

此处绝对位置为元素提供100％高度，并且边距扣除的高度等于您要为页脚和标题保留的空间。

参见演示：

http://jsbin.com/ucahom/1/edit

Answer 3

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

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

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

这是我的jsfidle示例。请注意，javascript resizable也被注释掉了。 http://jsfiddle.net/3ZuP4/

可调整大小的DIV容器，带有标题/正文/页脚，其中正文可滚动

3 个答案: