div max-height set dynamically using javascript

Question

I have a web app using master page and content pages (see the attached image). I need to set max-width of one div in content page dynamically accordint to the browser window size (so that the whole app stays on the page, without scrolling). I couldn't find the sloution (or couldn't replicate the results) using just html and CSS. So I'm thinking to do it using javascript. But the problem is, I NEVER used it, so I really have no clue how to do it. I'd really appriciate if someone took a couple of minutes and write the function that will do it. As I see it, I should take difference in height between bottom edge of the header and top edge of the footer and subtract height values of searchbar and button bar.

enter image description here

EDIT: Thanks to maxedison for providing that code. But, how do I use it? :D I'm a total noob. I have a problem, since I use masterpage and content pages. Where do I put that code?

EDIT 2 - THE ANSWER:

I looked a little further into how to use jQuery, and searched here some more, and I found a solution. Next time I start developing an application, I'll use jQuery from the bottoms up...It just simplifies some things so much. :)

So for the solution: It's similar to what maxedison suggested, but I changed it so, that I set height with CSS and I just added a fixed value to deduct from window.height.

<script type='text/javascript'>
    $(function () {
        $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });

        $(window).resize(function () {
            $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' });
        });
    });
</script>

@MrLister - I'm not sure this is possible in CSS. I've also sought a pure-CSS solution to make a div expand to fit the available vertical height, but without success. — maxedison
– maxedison, Commented Jan 27, 2012 at 21:22
@Mr Lister - I tried just about any CSS solution I could find...none did what I wanted. So I thought I'd give javascript or jQuery a go. — user1080533
– user1080533, Commented Jan 27, 2012 at 21:45

maxedison · Accepted Answer · 2012-01-27 21:21:02Z

3

Using jQuery, it would look something like:

function resetHeight(){
    var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight();
    $('.content').height(newHeight);
}

$(function(){
    newHeight();

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

answered Jan 27, 2012 at 21:21

maxedison

17.6k15 gold badges73 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1080533 Over a year ago

Great, thanks a lot! Now just to learn, where I should put this code. :D I'll be using it first time, so fingers crossed, I can make it work. :) Should I put this in my content page or in my master page? Thanks again.

user1080533 Over a year ago

Oh, I forgot to mention. I'm using .NET 2, because of some limitations I needed to consider. Will this work, or is it for newer versions on .net?

Nate Over a year ago

@user1080533 .NET version has nothing to do with jQuery (which is javascript) since it is client side. You should put this code in your <head> tag, in a <script> tag.

user1080533 Over a year ago

@Nate Thanks, I did google it and read some tutorials for jQuery and I managed to get what I wanted. I updated my question with an answer. :)

Collectives™ on Stack Overflow

div max-height set dynamically using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related