CODEWITHSUNDEEP
javascriptjquerycss
guy mograbi
guy mograbi

Reputation: 28608

Stretching div but not all over the page

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.

enter image description here

Upvotes: 1

Views: 110

Answers (2)

gmo
gmo

Reputation: 9000

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

Upvotes: 1

Sotiris
Sotiris

Reputation: 40066

Positioning the elements is easier to solve issues such the one you describe. For example you can use position:absoulte. Then using top,right,bottom & left properties you can position the element where is required. Here a sample 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;
}

Demo: http://jsfiddle.net/BV5Z6/4/

Upvotes: 4

Related Questions