Question

我需要使用窗口的高度和宽度以动态方式计算标题的宽度和高度。

问题是它们变小了16像素，我不知道为什么。

这是我期望得到的：

w_height：929，w_width：1280
body_height：929 - 顶部 - 底部 - 边框（1px顶部，1px底部）= 727
body_width：1280 - 左 - 右 - 边框（1px左，1px右）= 878

这就是我得到的：

body_height：711
body_width：867

你能告诉我如何解决这个问题，为什么会发生这种情况？谢谢。

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

        .solid_border{
            border: 1px solid green;
        }
        </style>
    </head>
    <body class="solid_border">
        <header>

            <figure >

            </figure>
            <nav>

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

</html>

Answer 1

你应该尝试：

alert($(window).outerHeight() +', '+$(window).outerWidth());

Answer 2

这可能是因为你应该得到外部宽度和高度。

请参阅：

因为填充，边框，最终是边距。

使用JavaScript查询时，浏览器窗口宽度小于预期

2 个答案: