2012-05-16 4 views
0

jquery .height()를 사용하여 문서 높이를 가져옵니다.jquery - using .height()

높이를 가져 오는 한 후이 http://jsfiddle.net/rkumarnirmal/86q37/

을 확인하시기 바랍니다, 그 위치에있는 요소를 배치하고있다. 어디에서 볼 수 있느냐는 문서의 높이가 실제로 틀린 것입니다.

어떻게 해결할 수 있습니까?

감사합니다.

+0

'.height'가 올바른 값을 반환하면 상자의 상단 위치를 높이로 설정합니다. 더 나은 이해를위한 thie 데모를보십시오 http://jsfiddle.net/skram/86q37/1/ –

+0

어쩌면 당신은 그 hight에서 더미의 높이를 빼기 위하여 그려, 더미가 페이지의 바닥에 유래하는 결과가 될 것입니까? 이것은 물론 css로 직접 할 수 있습니다. –

답변

3

top은 #dummy의 맨 위에 상대적입니다.

그래서 당신은 페이지의 높이에서 #dummy의 높이를 뺄 필요

$(function(){ 
    var h = $(document).height() - $("#dummy").height(); 
    $("#dummy").css("top", h+"px"); 
})​ 

내가 언급해야하지만 당신은 순수 CSS에서이 작업을 수행 할 수 :

http://jsfiddle.net/86q37/3/

그래도 오래된 브라우저를 지원하고 싶다면, CSS 트릭을 찾아 보거나 JS를 사용해야 할 것이다.

1

.height이 올바른 값을 반환합니다. 그러나 상자의 상단 위치를 문서의 높이로 설정하고 있습니다.

$(function(){ 
    var h = $(document).height(); 
    $("#dummy").css("top", function() { 
     return (h - $(this).height()) +"px"; 
     //This will place the box at top position subtracting 
     //the documentHeight - dummyHeight; 
    }); 
}) 

DEMO

1

하나의 솔루션이 jQuery를 사용하고, 몸의 높이에서 요소의 높이를 빼기하는 것입니다, 더 나은 이해를위한 데모 아래를 참조하십시오 (당신은 걱정 필요성을을하지 않습니다 높이에 대한 추가 px JQuery와)은 내부적으로 처리 :

$(function(){ 
    var h = $(document).height(); 
    $("#dummy").css("top", h - $('#dummy').height()); 
})​ 

JS Fiddle demo.

#dummy { 
    position: absolute;    
    width: 100px; 
    height: 100px; 
    bottom: 0; /* aligns the bottom of the element zero pixels from the bottom of the document */ 
    left: 0; /* aligns the left side of the element zero pixels from the left side of the document */ 
    background-color: red; 
}​ 

JS Fiddle demo :

쉽게 해결책은 CSS를 사용하는 것입니다.