获取浏览器宽度和高度追加divs 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 ，左、右、上和下属性是指固定定位对象的相应边缘与视口相应边缘的距离。

。因此，您在哪里应用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);
});