jquery - ブラウザーの幅と高さを取得して、divs jQuery を追加します。

Question

jQuery を使用して、ブラウザーの幅と高さを取得し、2 つの異なる DIV を 2 つの異なる位置に追加しようとしています。

DIV ONE はブラウザー ウィンドウの左から 40 ピクセル、下から 40 ピクセル、DIV TWO は右から 40 ピクセル、下から 40 ピクセルの絶対位置に配置する必要があります。 、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);
});