2

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

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

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

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

上面我想要的插图。

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

4

3 回答 3

2

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

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

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

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

于 2013-07-31T14:29:15.463 回答
0

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

这个，大多数时候可能有点棘手！您需要使该区域 100% 为 body 元素的高度减去页眉的高度和页脚的高度。

为了实现这一点，我喜欢以下解决方案：

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

}

这里绝对位置为元素提供了 100% 的高度，并且边距减去高度等于您希望为页脚和页眉保留的空间。

见演示：

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

于 2013-07-31T14:26:45.370 回答
0

您需要指定初始高度。此外，body 应该设置为 resize:both （或者如果你愿意，也可以只是垂直的）。

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

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

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

于 2013-07-31T14:31:27.083 回答