제 CSS에서 CSS top 0px를 사용하여 페이지 상단에 요소의 위치를 설정했습니다.jQuery에서 브라우저의 맨 아래 위치를 얻는 방법은 무엇입니까?
브라우저 하단의 위치를 어떻게 알 수 있습니까? (나는 요소를 페이지의 아래쪽, 즉 아래쪽으로 볼 수있게하고 싶다).
제 CSS에서 CSS top 0px를 사용하여 페이지 상단에 요소의 위치를 설정했습니다.jQuery에서 브라우저의 맨 아래 위치를 얻는 방법은 무엇입니까?
브라우저 하단의 위치를 어떻게 알 수 있습니까? (나는 요소를 페이지의 아래쪽, 즉 아래쪽으로 볼 수있게하고 싶다).
다음을 사용할 수 있어야합니다. css : bottom : 0px;
사용자가 페이지를 아래로 스크롤 할 때 브라우저 창 아래쪽에 머물러있게하거나, 페이지 아래쪽에 "스틱"할 항목을 지정 하시겠습니까?
# 2를 원한다면 크로스 브라우저 CSS 방법을 here이라고 할 수 있습니다.
브라우저의 아래쪽 위치는 클라이언트에서 문서의 높이와 같은 0부터 아래까지의 거리입니다. 이것은
은 문서의 높이이지만 창의 아래쪽은 아닙니다. 또는 심지어 창의 높이, 이것은 정답이 아닙니다. –
여기 페이지 하단에 머물 필요가있는 기본 항목에 대한 나의 접근 방식 돕고있다
$(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>
: 고정; –