Question

可能重复：
how to get the browser window size without the scroll bars

如何使用jquery在浏览器内容查看区域周围放置边框？

这是我试过的......

 var $windowW = $(window).width();
 var $windowH = $(window).height();
 alert($windowW + "  " + $windowH); // THe results are width 1440 and 745 height
 $("body").css("width", $windowW);
 $("body").css("height", $windowH);
 $("body").css("border","1px solid green");

我的文档正文中没有元素，我没有得到绿色边框的宽度为1440，高度为745。

如何使用返回值在浏览器的可视区域周围放置边框 $ windowW和$ windowH使用jquery？

Answer 1

使用CSS和绝对定位可以更轻松地完成：

body
{
    border: 2px solid green;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

请参阅此fiddle。

Answer 2

正如Valamas所说，你的主要原因似乎是设置宽度两次的错误。

但是，您也可以稍微简化代码，以使用.css()函数的较新“地图”形式：

$("body").css({
    width: $(window).width() - 2, // subtract twice the thickness
    height: $(window).height() - 2, // of the border from each dimension
    border: '1px solid green'
});

编辑：您似乎需要从宽度和高度中减去计划添加的边框宽度的两倍，以避免显示任何滚动条。我不是百分之百确定这是为什么，或者如何绕过它，但它与边界增加身体宽度的事实有关，所以你需要补偿它。上面的代码已被更改，以说明我的意思。

如何使用jquery在浏览器内容查看区域周围放置边框？

2 个答案: