CODEWITHSUNDEEP
javascriptjqueryresizeheightfluid
Ponciusz
Ponciusz

Reputation: 147

jQuery fluid div dynamic height

This is my FLUID resposnive DIV:

<div class="kamil_test"></div>

and its for example 438px height in standard view when i resize window its for example 300px etc. everything works perfect but i need to have width="something" in this div

so my div in begining have to look like that

<div class="kamil_test" style="height: 438px;">

and when i resize window var inside height have to dynamicly change proportionaly to width which is 100% i need have height in px

when i type jquery script like this its only generate width after full render but dont refresh it.

$(".kamil_test").css("height", "+=0");

how to make it refreshable while resizeing page???

Upvotes: 0

Views: 2545

Answers (2)

GuybrushThreepwood
GuybrushThreepwood

Reputation: 153

Create a function to adjust your div size, and call when resize the window.

Ex.

function adjust(){
    var maxW=window.innerWidth,
    afterHeight = //your operation to obtain height,
    afterWidth = //your operation to obtain width
    $(".kamil_test").css({height:afterHeight,width:afterWidth});
}

$(document).ready(adjust);
$(window).resize(adjust);

Upvotes: 2

Jothimurugan B
Jothimurugan B

Reputation: 134

You can use max-height property.

max-height/max-width will restrict the div's height/width to max of the specified value. If you specify your actual height/width relative to the parent element/Window size then it will re-size accordingly.

Try the below.

<div class="kamil_test" style="max-height: 438px;height: 100%;">

Upvotes: 0

Related Questions