(UIO 001) 상하좌우 가변대응 레이아웃 2011.05.30 11:32

네이버 지도나 다음지도, 네이버 메일,캘린더,포토앨범... 처럼 브라우져 사이즈를 조절할때마다 상하좌우 가변댕을해서 늘어났다 줄어들었다 하는 레이아웃을 볼수 있다. 나도 이전엔 자바스크립트를 사용하여 구현을 하였는데.. 이번엔 CSS로만 얼추 비슷한 레이아웃을 구현해보려고 한다. 별로 쓸모없는 짓일지 모르지만...

예제보기

위와 같은 형태가 될것이다. Header는 상단고정,Footer는 아래 고정, 가운데 영역은 스크롤이 작동되어야 한다. 브라우져 사이즈를 조절할땐 가운데 영역이 늘어나야 한다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>UIO</title>
</head>
<body>
<div id="jtFixWrap">
    <div id="jtWrap">
        <div id="jtHeader">Header</div>
        <div id="jtContainer">
            <div id="jtNav"><div id="jtNavContent">Nav</div></div>
            <div id="jtContent">Content</div>
        </div>
        <div id="jtFooter">Footer</div>
    </div>
</div>
</body>
</html>

CSS

*{margin:0;padding:0}
html{overflow:hidden;height:100%;padding:51px 0 51px}
body{margin:-51px 0 -51px;height:100%}
/* Joontop Layout 01 */
#jtFixWrap{height:100%}
#jtWrap{display:table;width:100%;height:100%}
#jtHeader{height:50px;border-bottom:1px solid #000}
#jtContainer{display:table-row;width:100%;height:100%}
#jtFooter{height:50px;border-top:1px solid #000}
#jtNav{overflow:hidden;overflow-y:auto;position:relative;float:left;width:200px;height:100%;_margin-right:-3px;border-right:1px solid #000}
#jtNavContent{position:absolute}
#jtContent{overflow:hidden;height:100%;zoom:1}

장점

자바스크립트 미사용으로 퍼포먼스 상승

단점

opera,IE8이상 브라우져 지원안함 (IE는 IE7 호환모드로 대응가능)
최소사이즈 지정불가, 전체영역 스크롤 불가 (이기능은 솔직히 없어도 된다고 생각함)
그 외에 단점 많음...

END

빨리 CSS3를 쓰며 모든 브라우져가 렌더링이 동일하여 이런것에 머리싸매고 고민하지 않아도 쉽게쇱게 구현될수 있는 날이 오길...

2차 수정된 가변대응 ----------------------

예제보기

신현석님의 'CSS 절대 위치를 사용한 프레임 효과' 참조하여 원하는 레이아웃을 얻게 되었음. 98% 만족함.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>UIO</title>
</head>
<body>
<div id="jtWrap">
    <div id="jtHeader">Joontop Header</div>
    <div id="jtContainer">
        <div id="jtNav">Nav</div>
        <div id="jtContent">Joontop Content</div>
    </div>
    <div id="jtFooter">Joontop Footer</div>
</div>
</body>

CSS

/*
    Joontop UIO 01 (상하좌우 가변대응 레이아웃)
    남아있는 문제점
    1. IE6에서 min-width, min-height 불가
    2. IE7에서 전체스크롤 불가 (다음지도에는 전체적으로 없음, 불필요한 기능이라 생각됨)
    3. ...
*/
/*
    header,footer의 높이를 padding에 삽입
    IE에선 overflow:hidden 이 필요함 (제거하면 전체스크롤 기능)
*/
html{*overflow:hidden;height:100%;*padding:51px 0 51px}
/*
    header,footer의 높이를 margin에 빼기
    overflow:hidden은 IE7에서 드래그 에러현상때문
*/
body{*overflow:hidden;height:100%;margin:0;*margin:-51px 0 -51px}
/*
    IE7에서 min-height값은 header,footer높이를 뺀값 대입
    position:relative는 IE외 브라우져에 min값을 넣을수 있도록 하기위함
*/
#jtWrap{position:relative;height:100%;min-width:900px;min-height:500px;*min-height:398px}
#jtHeader{position:absolute;*position:static;top:0;width:100%;height:50px;border-bottom:1px solid #000}
/*
    header,footer의 높이를 top,bottom 에 삽입
    height:auto 는 IE외 브라우져에선 절대위치로 크기를 잡아야해서
*/
#jtContainer{position:absolute;*position:static;top:51px;bottom:51px;width:100%;height:auto;*height:100%}
#jtFooter{position:absolute;*position:static;bottom:0;width:100%;height:50px;border-top:1px solid #000}
#jtNav{overflow:hidden;overflow-y:auto;position:relative;float:left;width:200px;height:100%;_margin-right:-3px;border-right:1px solid #000}
/*
    세로 스크롤 필요할시 overflow-y:auto 추가
*/
#jtContent{overflow:hidden;overflow-y:auto;position:relative;height:100%;zoom:1}

장점

자바스크립트 미사용으로 퍼포먼스 상승
IE6이상 브라우져 올대응

단점

IE6에서 min-width 사용불가, 전체영역 스크롤 불가 (이기능은 솔직히 없어도 된다고 생각함)

IE6대응 안함 - min-width, min-height 작동

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>UIO</title>
</head>
<body>
<div id="jtWrap">
    <div id="jtHeader">Joontop Header</div>
    <div id="jtContainer">
        <div id="jtNav">Joontop Nav</div>
        <div id="jtContent">Joontop Content</div>
    </div>
    <div id="jtFooter">Joontop Footer</div>
</div>
</body>
</html>

CSS

html{height:100%}
body{height:100%;margin:0}
#jtWrap{position:relative;height:100%;min-width:900px;min-height:500px;}
#jtHeader{position:absolute;top:0;width:100%;height:50px;border-bottom:1px solid #000}
#jtContainer{position:absolute;top:51px;bottom:51px;width:100%}
#jtNav,#jtContent{overflow:hidden;position:absolute;top:0;bottom:0;height:100%}
#jtNav{overflow-y:auto;width:200px;border-right:1px solid #000}
#jtContent{overflow-y:auto;left:201px;right:0}
#jtFooter{position:absolute;bottom:0;width:100%;height:50px;border-top:1px solid #000}

준탑이었음.

태그 (tag) : 레이아웃,가변대응,풀브라우징,풀사이즈,퓨터하단고정

댓글 (가입하셔야 이용하실 수 있습니다.) replies

신현석 2011.05.30 14:09 X

CSS 절대 위치를 사용한 프레임 효과
http://hyeonseok.com/soojung/css/2011/05/26/654.html

이것도 참고해 보세요. 훨씬 간단하게 IE7 이상 다 지원 됩니다. :)
joontop 2011.05.30 14:45 X

좋은팁 감사합니다~~
제가 원하던 방식과는 조금 다르네요.TT
aside 가 닫혔다 열릴때마다 article이 늘어나야 하며
article 안에 엘리먼트가 높이 100%를 가질수 있어야 합니다.
IE8이상, 표준렌더링방식에선 완벽한듯 합니다만...
결국 빨리 IE7이하를 버려야...
준탑 2011.06.28 15:36 X

현재까지 발견된 이슈
1. IE7에서만 a href="#" 을 클릭해서 URL에 # 이 붙으면
전체가 1px 위로 움직인다...
물론 #을 넣을일이 없겠지만 고치고 싶네.
황준상 2011.07.09 18:33 X

맨위에 블라인드 처리하여 id="#" 을 넣어 해결함.
장수정 2011.08.01 15:09 X

회사에서 뭐 필요한게 있어서 구글링 하다가 오게 되었어요.
좋은 정보 감사합니다 :)
혹시 황준상(=준탑?) 님이 기남 팀장님 영일 과장님을 같이 아는
그 준상씨이려나요? ^^;
준탑 2011.08.01 15:24 X

ㅎㅎ수정형~

administration

category

recent comment

(UIO 001) 상하좌우 가변대응 레이아웃 2011.05.30 11:32

HTML

CSS

장점

단점

END

2차 수정된 가변대응 ----------------------

HTML

CSS

장점

단점

IE6대응 안함 - min-width, min-height 작동

HTML

CSS

댓글 (가입하셔야 이용하실 수 있습니다.) replies