티스토리 뷰

브라우저의 크기에 상관없이 footer를 하단에 고정시키는 것을 검색해 봤더니

별 희안한 소스들이 많이 널려있더군.


footer에 position:absolute;만 줘서 고정시켜버리는 사람도 있는 반면

약~간은 편법을 써서 하는 사람들도 있긴 하던데...


그럴경우 컨텐츠 영역에서 글이 길게 써지면 컨텐츠 영역이 footer를 뚫고 밑으로 길게 늘어나는 현상이 발생.


그래서 정리해 보았다!!


가로 1단 footer하단고정 레이아웃!!


<!DOCTYPE HTML>

<html lang="kor">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>zioyou그룹웨어 CSS만들기</title>


<script>

if(/*@cc_on!@*/false){

document.documentElement.className+='ie ie' + getInternetExplorerVersion();

}

function getInternetExplorerVersion() {

var rv = -1;

if (navigator.appName == 'Microsoft Internet Explorer') {

var ua = navigator.userAgent;

var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null)

rv = parseFloat(RegExp.$1);

}

return rv;

</script>

<style>

* {margin:0; padding:0;}

html,body {height:100%; margin:0; padding:0; }

body {margin:0; height:100%; font-size:12px; color:#666; line-height:14px;}

/*레이아웃*/

div#wrapper {position:relative; width:100%; min-height:100%; margin-bottom:-132px;}

div#wrap {padding-bottom:132px;}

div#footer {width:100%; height:132px; margin:0 auto; background:red;}

</style>

</head>


<body>

<div id="wrapper">

<div id="wrap">

<p>* 컨텐츠영역 입니다.</p>

<p>

<script>

for(var i=0; i<150; i++){

//document.write(i + '<br/>');

}

</script>

</p>

</div>

</div>

<div id="footer">

<p>* 하단영역 입니다.</p>

</div>

</body>

</html>


위에서부터 설명하자면

<script>

if(/*@cc_on!@*/false){

document.documentElement.className+='ie ie' + getInternetExplorerVersion();

}

function getInternetExplorerVersion() {

var rv = -1;

if (navigator.appName == 'Microsoft Internet Explorer') {

var ua = navigator.userAgent;

var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null)

rv = parseFloat(RegExp.$1);

}

return rv;

</script>


이 스크립트를 간단히 설명하자면

ie(인터넷 익스플로러)일 경우 <html> 태그에 class를 넣어준다.

"ie"라는 클래스와 "ie브라우저버전" 이렇게 두개..

보통 크롬이나 파폭등의 css가 적용되는것과 익스에서 적용되는 것이 조금 다르다보니..

ie핵이라는 것들을 많이 쓰시는데..

난 아직 그정도 스킬이 없어놔서..

걍 스크립트로 브라우저 버전을 class로 박아 버렸다.


인터넷 익스플로러 F12를 누르면(개발자도구) html 구조가 보인다.

스크립트 적용 후 소스를 보면 class가 추가가 된것이 보인다.



이럴경우 css작성할때 조금 편하다. (주관적으로!)

.contensText {margin-top:20px;}

.ie .contensText {margin-top:12px;}            /* IE일 경우 전부 적용됨 */

.ie.ie10 .contensText {margin-top:10px;}    /* IE10일 경우만 적용 */

.ie.ie9 .contensText {margin-top:7px;}    /* IE9일 경우만 적용 */

.ie.ie8 .contensText {margin-top:5px;}    /* IE8일 경우만 적용 */

.ie.ie7 .contensText {margin-top:3px;}    /* IE7일 경우만 적용 */

이런 식으로 브라우저 버전마다 적용 할 수 있다.





글자가 뚫고 나가는것을 확인하기 위해 몇번이고 <br>태그를 넣어서 쓰기 귀찮다.

또한 몇번째에서 잘리고 있는지 잘리는지 안잘리는지를 확인하기 위해선 숫자 번호만큼 좋은게 없다.

가끔 똑같은 텍스트를 주~욱 늘릴 경우 이게 잘린건지 안잘린건지 확인이 안된다.

<script>

for(var i=0; i<150; i++){

document.write(i + '<br/>');

}

</script> 


글이 들어가는 부분에 위의 스크립트 소스를 넣어주면

자동으로 글을 뿌려준다.

위에 150이라는 숫자는 0부터시작해서 149번까지 숫자를 뿌려준다는 것이다.

뭐 i=1; i<=150; 이렇게 바꾸면

1부터 시작해서 150으로 끝난다.



뭐 일단 css내용추가는 조금있다 하고..

일단은 저장..

일하자.





















댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        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
글 보관함