CODEWITHSUNDEEP
jquerybrowserresizeheight
Petter Nitter
Petter Nitter

Reputation: 11

How to increase height of DIV based on content when height of DIV is defined by browser height with jQuery?

I am using the jQuery code from this post to make my DIV's height adjust according to the browser's height, and it is working just fine. What I am struggling with is to adjust this code so that it only adjusts to the browser's height when the content itself is not large enough to do so. At the moment, if you have content in the DIV that would naturally be taller than the browser's height, the jQuery code still makes the DIV only as tall as the browser window, cutting of the overflowing content.

The jQuery code I am using to make the DIV adjust height based on the browser's height:

$(document).ready(function(){
    resizeContent();

    $(window).resize(function() {
        resizeContent();
    });
});

function resizeContent() {
    $height = $(window).height() - 0;
    $('body div.slide').height($height);
}

If anyone has any ideas as to how the code can be modified to keep it from cutting off the the content that is taller than the browser window, I would be forever grateful.

Thanks for any help!

Upvotes: 1

Views: 582

Answers (2)

Ihor Patychenko
Ihor Patychenko

Reputation: 196

You can resolve your problem with CSS if I understand the question

div.slide{height: 100%}

Upvotes: 0

ron tornambe
ron tornambe

Reputation: 10780

If I am understanding your question, all you need to do is test the height of the div before setting applying the window height:

if ($('body div.slide').height()<=$height) {
  $('body div.slide').height($height);
}

see jsfiddle: http://jsfiddle.net/9YQYt/

Upvotes: 2

Related Questions