jquery css селектор не работает

Question

Я пытаюсь получить ширину окна & высота + ширина div & высота, чтобы найти отрегулированную ширину. Я также пытаюсь полностью позиционировать div с jquery, но мой код не работает. Я предоставлю код ниже.

CSS:

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

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'); 

}); 

Что я делаю неправильно в моем JQuery? Надеюсь, я объяснил свои объяснения.

Answer 1

Если вы пытаетесь выровнять DIV в самом низу справа, то вы перепутали сверху -> 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

Если код включает в себя получение размера компонента (особенно там изображение на странице), вы хотите поместить код в обработчик load, а не ready обработчик, потому что ready выполняется до того, как все изображения будут загружены, и размер страницы может измениться после этого.

Также необходимо обменивать ваши 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'); 

});