페이지 세로 정렬
가로 정렬은 흔히 알려진 margin:0 auto; 만으로 간단히 해결이 가능하다.
그런데 세로로 정렬을 하려면?
브라우저 사이즈에 따라 유동적으로 움직이게 하려면?
$(document).ready(function(){
var currentHeight = $(window).height();
$("#wrapper").each(function(){
var wrapperHeight = $(this).css("height"); // wrapper의 height 구하기
if (parseInt(currentHeight) > parseInt(wrapperHeight)){
var newHeight = parseInt(currentHeight) - parseInt(wrapperHeight);
newHeight = newHeight/2;
$(this).css('margin-top',newHeight);
}
});
});
위 스크립트로 브라우저의 뷰포트(툴바, 창틀 등을 제외한 순수 컨텐츠 영역)의 사이즈를 구해 마진을 조절해 준다.
매 변동시마다 적용하려면 resize 함수를 사용해 보길 바란다.
혹은, body옵션으로 onresize도 있지만 적극 추천하진 않는다.
'컴퓨터 > jQuery & Ajax' 카테고리의 다른 글
페이지 세로 정렬 (2) | 2013.03.20 |
---|---|
jQuery Ajax로 특정 레이어에 페이지 가져오기 (0) | 2013.03.20 |
2013.05.10 17:37
세로정렬 자바스크립트안써도 가능함ㅇㅅㅇ
css만으로도 가능함
ㅇㅇ 그러니깐 툴바 창틀 등을 제외한 순수컨텐츠 영역만을 자스안써도됨.
body옵션은 onresize뿐만아니라 전부 비추공ㅇㅅㅇ!
2013.05.13 16:16 신고
음 그건 모르겠다 ㅋㅋ
난 해외서적에 있던거 그대로 가져온거라