Получить ширину и высоту браузера и добавить divs jQuery

Question

Я пытаюсь получить ширину и высоту браузера и добавить два разных DIV в две разные позиции с помощью jQuery.

DIV ONE должен быть в абсолютном положении: 40 пикселей слева и 40 пикселей снизу окна браузера, в то время как DIV TWO должен быть 40 пикселей справа и 40 пикселей снизу, независимо от того, какое устройство смотрит на веб-страницу (поэтому должно работать на 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);
});