Browser Window width smaller than expected when querying with JavaScript
<p>I need to compute the header's width and height in a dynamic manner using the window's height and width. </p>

<p>The problem is they get smaller with 16 pixels and I don't know why. </p>

<p>This is what I expect to get: </p>

<ol>
<li>w_height: 929, w_width: 1280</li>
<li>body_height: 929 - top - bottom - border(1px top, 1px bottom) = 727</li>
<li>body_width: 1280 - left - right - border(1px left, 1px right) = 878</li>
</ol>

<p>This is what I get: </p>

<ol>
<li>body_height: 711</li>
<li>body_width: 867</li>
</ol>

<p>Can you tell me how can I fix this and why does this thing occur?
Thank you.</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Dancing Web&lt;/title&gt;
        &lt;!--&lt;link rel="stylesheet" href="css/index.css" /&gt;--&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
        &lt;style&gt;
        body{
            position:absolute;
            top: 100px;
            left: 200px;
            right: 200px;
            bottom: 100px;  
        }
        figure{
            margin:0;
            padding:0;
        }

        .solid_border{
            border: 1px solid green;
        }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body class="solid_border"&gt;
        &lt;header&gt;

            &lt;figure &gt;

            &lt;/figure&gt;
            &lt;nav&gt;

            &lt;/nav&gt;
        &lt;/header&gt;       
        &lt;script type="text/javascript"&gt;
            $(document).ready(function(){          
                alert($(window).height() +', '+$(window).width());
                alert($('body').css('height') +', '+$('body').css('width'));        
            });
        &lt;/script&gt;
    &lt;/body&gt; 

&lt;/html&gt;
</code></pre>
