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.

EDIT:
Thanks to maxedison for providing that code. But, how do I use it? 😀 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>

Answer 1

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();
    });
});