jquery - 获取浏览器宽度和高度附加div jQuery

Question

我正在尝试获取浏览器的宽度和高度，并使用 jQuery 将两个不同的 DIV 附加到两个不同的位置。

DIV ONE 应该是绝对定位的，距离浏览器窗口左侧 40px 和距离底部 40px，而 DIV TWO 应该距离右侧 40px 和底部 40px，无论什么设备正在查看网页（因此必须在 iPad 上工作、iPhone 等）。

我在两个 div 中也有内容（图像、子 div 和文本），但我只是不知道如何处理这个问题，因为我对 jQuery 毫无用处。

谁能帮我解决这个问题？

Answer 1

你不需要 jQuery（至少是定位）。CSS 有足够的技巧。

不要使用绝对定位，使用固定：

#div-1, #div-2 {position:fixed;}
#div-1 {left:40px; bottom;40px;}
#div-2 {right:40px; bottom;40px}

使用position:fixed时，left、right、top 和 bottom 属性指的是固定位置对象的相应边缘与视口相应边缘的距离。

...所以你在哪里应用你的 div 并不重要。只需将它们附加到正文：

var myDivsHtml = howeverYouGetYourDivs();
$('body').append(myDivsHtml)

Answer 2

我相信您正在寻找固定的定位而不是绝对的。

只需为此使用 CSS

.div1{
   position:fixed;
   bottom:40px;
   left:40px;
}
.div2{
   position:fixed;
   bottom:40px;
   right:40px;
}

Answer 3

试试这个：

$(function(){
    var $body = $("body");
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "left":"40px"
        }).appendTo($body);
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "right":"40px"
        }).appendTo($body);
});