我有一个动态高度的框架。
其中,我有 3 个部分,其中之一是内容部分。
我想将内容的边缘固定到与框架的恒定距离。
这是重现该问题的小提琴。我在小提琴中使用 jquery-ui-dialog 只是因为它在重现问题时更容易使用。该解决方案不能涉及 jquery-ui-dialog 特定代码。它可以使用 jquery 和 jquery-ui。
如果存在 CSS 解决方案,则更可取。
我有一个动态高度的框架。
其中,我有 3 个部分,其中之一是内容部分。
我想将内容的边缘固定到与框架的恒定距离。
这是重现该问题的小提琴。我在小提琴中使用 jquery-ui-dialog 只是因为它在重现问题时更容易使用。该解决方案不能涉及 jquery-ui-dialog 特定代码。它可以使用 jquery 和 jquery-ui。
如果存在 CSS 解决方案,则更可取。
定位元素更容易解决您描述的问题。例如,您可以使用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/
您需要应用“ 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" );