2009-06-09 4 views

답변

4

다음을 사용할 수 있어야합니다. css : bottom : 0px;

+0

: 고정; –

0

사용자가 페이지를 아래로 스크롤 할 때 브라우저 창 아래쪽에 머물러있게하거나, 페이지 아래쪽에 "스틱"할 항목을 지정 하시겠습니까?

# 2를 원한다면 크로스 브라우저 CSS 방법을 here이라고 할 수 있습니다.

2

브라우저의 아래쪽 위치는 클라이언트에서 문서의 높이와 같은 0부터 아래까지의 거리입니다. 이것은

+3

은 문서의 높이이지만 창의 아래쪽은 아닙니다. 또는 심지어 창의 높이, 이것은 정답이 아닙니다. –

1

여기 페이지 하단에 머물 필요가있는 기본 항목에 대한 나의 접근 방식 돕고있다

 $(document).ready(function() { 
     var bottomPosition = $(document).height(); 
     alert(bottomPosition); 
    }); 

희망 : 그것은 쉽게 같이 계산 될 수있다.

먼저 자바 스크립트. "centerBottom"함수는 액션이 ​​발생하는 곳입니다.

<script type="text/javascript"> 
/** 
* move an item to the bottom center of the browser window 
* the bottom position is the height of the window minus 
* the height of the item 
*/ 
function centerBottom(selector) { 
    var newTop = $(window).height() - $(selector).height(); 
    var newLeft = ($(window).width() - $(selector).width())/2; 
    $(selector).css({ 
     'position': 'absolute', 
     'left': newLeft, 
     'top': newTop 
    }); 
} 

$(document).ready(function(){ 

    // call it onload 
    centerBottom("#bottomThing"); 

    // assure that it gets called when the page resizes 
    $(window).resize(function(){ 
     centerBottom('#bottomThing'); 
    }); 

}); 
</script> 

몇 가지 스타일을 통해 우리가 무엇을 돌아 다니는지 알 수 있습니다. 높이와 너비를 모르는 경우 절대적으로 물건을 이동하는 것은 힘들 수 있습니다. DIV는 일반적으로 지정되지 않은 경우 100 %의 너비를 갖습니다. 이는 원하지 않을 수 있습니다.

<style type="text/css"> 
body { 
    margin: 0; 
} 
#bottomThing { 
    background-color: #600; color: #fff; height:40px; width:200px; 
} 
</style> 

하고 페이지의 본문 :

위치와 함께
<body> 
<div id="bottomThing"> 
    Put me at the bottom. 
</div> 
</body> 
관련 문제