jquery CSS 선택기가 작동하지 않습니다.

Question

조정 된 너비를 찾으려면 창 너비 & 높이 + div의 너비 & 높이를 얻으려고합니다. 또한 jquery로 절대적으로 div를 배치하려고하지만 코드가 작동하지 않습니다. 나는 아래 코드를 제공 할 것이다.

CSS :

#inner { 
    width: 500px; height: 300px; 
    background: #ff0000; 
} 

jQuery를 : 내 jQuery를 잘못하고있는 중이 야 무엇

$(document).ready(function() { 

    var screenWidth = $(window).width(); 
    var screenHeight = $(window).height(); 

    var boxWidth = $("#inner").width(); 
    var boxHeight = $("#inner").height(); 

    var adjustedWidth = screenWidth - boxWidth; 
    var adjustedHeight = screenHeight - boxHeight; 

    $("#inner").css('position', 'absolute'); 
    $("#inner").css('top', adjustedWidth + 'px'); 
    $("#inner").css('left', adjustedHeight + 'px'); 

}); 

? 바라기를 나는 나의 설명에서 분명히했습니다.

Answer 1

당신이 맨 아래 오른쪽에있는 당신의 사업부를 정렬하려는 경우, 당신은 최고 혼합 한 -> adjustedWidth 왼쪽 -> adjustedHeight : 주위

$("#inner").css('top', adjustedWidth + 'px'); 
$("#inner").css('left', adjustedHeight + 'px'); 

그것이 있어야 다른 방법을 :

$("#inner").css('top', adjustedHeight + 'px'); 
$("#inner").css('left', adjustedWidth + 'px'); 

이외에도 코드 looks like it works.

또한 CSS 너비 또는 높이를 변경하려고 할 때 "px"를 추가 할 필요가 없습니다.

Answer 2

JavaScript를 사용하지 않아도됩니다. 절대적으로 배치 할 때, left과 top 만 사용할 수있는 것은 아닙니다. 대신 적절한 경우 right 및 bottom을 사용할 수 있습니다. 당신이 일을 한 것으로 나타났습니다 예를 들어, 오른쪽 아래 구석에 무언가를 배치, 당신은이를 사용할 수 있습니다 : 당신이 코드는 구성 요소의 크기를 받고 (특히

#something { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 300px; 
    height: 150px; 
    background: red; 
} 

Try it.

Answer 3

가 포함 된 경우 이미지를 다운로드하기 전에 ready 핸들러가 ready 핸들러가 아닌 load 핸들러에 코드를 넣으려고합니다. 그러면 모든 이미지가 다운로드되고 페이지 크기가 달라질 수 있기 때문입니다.

top 및 left도 교환해야합니다.

$(document).on('load', function() { 

    var screenWidth = $(window).width(); 
    var screenHeight = $(window).height(); 

    var boxWidth = $("#inner").width(); 
    var boxHeight = $("#inner").height(); 

    var adjustedWidth = screenWidth - boxWidth; 
    var adjustedHeight = screenHeight - boxHeight; 

    $("#inner").css('position', 'absolute'); 
    $("#inner").css('top', adjustedHeight + 'px'); 
    $("#inner").css('left', adjustedWidth + 'px'); 

});