伸展div，但不是整个页面

Question

我有一个动态高度的框架。

在其中，我有3个部分，其中一个是内容部分。

我想要将内容的边缘固定到与框架的恒定距离。

这是a fiddle to reproduce the issue。我在小提琴中使用jquery-ui-dialog只是因为它在重现问题时更容易使用。解决方案不能包含特定于jquery-ui-dialog的代码。它可以使用jquery和jquery-ui。

如果存在CSS解决方案，则更可取。

​

​

Answer 1

您需要应用"alsoResize“选项...然后，您的内容将与容器同时增长。

引用：

Resize these elements synchronous when resizing.

Code examples

Initialize a resizable with the alsoResize option specified.
$( ".selector" ).resizable({ alsoResize: ".other" });
Get or set the alsoResize option, after init.
//getter
var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
//setter
$( ".selector" ).resizable( "option", "alsoResize", ".other" );

来源：jQuery UI - Resizable option-alsoResize

Answer 2

定位元素更容易解决您所描述的问题。例如，您可以使用position:absoulte。然后使用top、right、bottom和left属性，您可以将元素定位在需要的位置。下面是一个css示例：

#content {
    border: 1px solid blue;
    bottom: 34px;
    top: 34px;
    left:10px;
    right:10px;
    position: absolute;
}
#footer {
    border: 1px solid green;
    bottom: 10px;
    left:10px;
    right:10px;
    position: absolute;
}

演示： http://jsfiddle.net/BV5Z6/4/