如何获得可用于浏览器窗口内容的实际宽度？

Question

I'm positioning my elements using JavaScript. In order to do it perfectly I have to get the amount of horizontal space available. Badly, $(window).width() does not take in account the scrollbar width. The result is this:

bad http://dl.dropbox.com/u/62862049/Screenshots/fb.png

Here, "Pagina 1" is contained in a small div that was supposed to align with the right border of the window. Well, it does - literally - ignoring the scrollbar, which covers part of the div, throwing the "1" of "Página 1" to the next line.

Answer 1

This is similar to two previous questions:

how to get innerWidth of an element in jquery WITHOUT scrollbar

and

How to get screen width without (minus) scrollbar?

Answer 2

use this function

function scrollbar_width() {

        var calculation_content = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
        jQuery('body').append(calculation_content);
        var width_one = jQuery('div', calculation_content).innerWidth();
        calculation_content.css('overflow-y', 'scroll');
        var width_two = jQuery('div', calculation_content).innerWidth();
        jQuery(calculation_content).remove();
        return (width_one - width_two);

    }

now calculate available with

var availableWidth = $(window).width() - scrollbar_width();