고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
웹사이트 개발시 배경화면을 넣거나 팝업을 띄우는 경우 현재 웹사이트가 표시되는 브라우저의 높이를 구해야 할 필요가 있을 때가 있습니다
clientHeight , browserHeight , innerHeight 등등 다양한 높이를 구하는 변수값은 혼동을 주기 쉽고, 게다가 브라우저 종류에 따라서도 표준화 되어 있지 않기때문에, 코딩하는 입장에서는 각 브라우저별로 각각 다른 방법을 사용해야 합니다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var browser = {
msie : /msie/.test( userAgent ) && !/opera/.test( userAgent ),
safari : /webkit/.test( userAgent ),
firefox : /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ),
opera : /opera/.test( userAgent )
};
window.onload = function (){
var nFinalHeight = 0;
if( browser.msie ){ // 인터넷 익스플로러
var scrollHeight = document.documentElement.scrollHeight;
var browserHeight = document.documentElement.clientHeight;
nFinalHeight = scrollHeight < browserHeight ? browserHeight : scrollHeight;
} else if ( browser.safari ){ //Chrome 또는 Safari, 같은 엔진을 사용합니다
nFinalHeight = document.body.scrollHeight;
} else if ( browser.firefox ){ // Firefox 또는 NS
var bodyHeight = document.body.clientHeight;
nFinalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;
} else if ( browser.opera ){ // Opera
var bodyHeight = document.body.clientHeight;
nFinalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;
} else {
alert("지원하지 않는 브라우져!!");
}
alert(nFinalHeight );
}
</script>
|
cs |
위 코드는 브라우저별 배경화면을 구할 수 있는 코드입니다. nFinalHeight 값이 현재 브라우저의 높이값입니다
참고사이트 : http://egloos.zum.com/cspark/v/2397563
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| CSS 애니메이션 따라하기, 움직이는 고양이 CSS Animation (0) | 2020.02.17 |
|---|---|
| CSS 입력폼 크기, 정렬, 크롬/익스플로러/엣지 동일하게 표현하기 (0) | 2020.02.16 |
| PHP 에서 HTML 특수문자 확인하거나 출력하기, URL encoding (0) | 2019.08.06 |
| html 배경음악 자동재생 ... 크롬정책변경으로 인한 대응, audio autoplay in HTML (21) | 2019.07.18 |
| html canvas 내용을 동영상으로 / 캔버스 내용을 동영상으로 / 캔버스 애니메이션을 동영상으로 변환, 저장, 스트리밍 (1) | 2019.07.06 |
댓글 영역