Question

I have a frame with dynamic height.
In it, I have 3 sections, one of them is the content section.

I want to pin the content’s edges to a constant distant from the frame.

Here is a fiddle to reproduce the issue. I am using the jquery-ui-dialog in the fiddle just because it is easier use when reproducing the problem. The solution cannot involve jquery-ui-dialog specific code. it can use jquery and jquery-ui though.

A CSS solution if exists is preferable.

Answer 1

You need to apply the “alsoResize” option… then , your content will grow at the same time as the container.

Quote:

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" );

Source: jQuery UI – Resizable option-alsoResize