Grow your CSS skills. Land your dream job.

Content Height

  • # September 19, 2011 at 12:18 am

    I came across some Javascript that reads the browser size. I was hoping to use the code snippet to set the height of my content area. Can anyone possibly help me with this. I’m not sure how to pass the information to my CSS, if even possible.


    function BrowserSize() {
    var viewportwidth;
    var viewportheight;
    var finalheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
    {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    finalheight = viewportheight - 200;

    document.write('

    Your viewport height is '+finalheight+'

    ');
    }
    # September 19, 2011 at 3:12 am

    With jQuery, you could do it like this:

    var windowHeight = $(window).height();
    var $content = $("#content");

    $content.height(windowHeight);
    # September 19, 2011 at 11:44 pm

    @jamy_za – I’m still learning javascripts and jQuery. I have a javascript file called ajax.js and has a small snippet of code that I’m using to load content dynamically without having to refresh the page. How can I add this to it?

    Current file


    jQuery(document).ready(function($) {
    var $mainContent = $("#content"),
    siteUrl = "http://" + top.location.host.toString(),
    url = '';

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
    location.hash = this.pathname;
    return false;
    });

    $(window).bind('hashchange', function(){
    url = window.location.hash.substring(1);

    if (!url) {
    return;
    }

    url = url + " #content";

    $mainContent.animate({opacity: "0.1"}).html('

    Please wait...').load(url, function() {
    $mainContent.animate({opacity: "1"});
    });
    });

    $(window).trigger('hashchange');
    });

    # September 20, 2011 at 3:27 am

    Chris did a tutorial based on this. It looks like you may have had a look at it, but at the same time I’m not sure :p

    # September 21, 2011 at 9:08 pm

    I did take a small look at it but it was after I got to the point of where I am. I’m stuck where I’m at now because I have my header and footers “stuck” on the page and I want the content to change between the items.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".