질문 하시기 전에 아래 글을 꼭 읽어주세요.
- XE 질문하시기 전에 XE Core 매뉴얼을 읽어봐주세요.
- 다음의 항목에 해당 하는 질문은 여기보단 해당 프로젝트의 포럼에 글을 올리시는게 더 전문적인 답변이 가능합니다.
게시판, 플래닛, CafeXE, Textyle, wiki, IssueTracker 이 외에도 XE Project에 전문 프로젝트들이 있고 각 프로젝트의 포럼등에서 질문을 하시는 것이 더 좋습니다.
질문하신 분은 꼭 답변 채택을 하셔야 질문시 걸었던 포인트의 절반을 되돌려 받습니다.
![[레벨:4]](http://www.xpressengine.com/modules/point/icons/xe_v3/4.gif "포인트:2085point (79%), 레벨:4/30"){kind=icon}
스카이피아안녕하세요. 레이아웃 만들다가 궁금한게 생겨서 질문 드립니다.현재 헤더, 바디, 푸터 분리하고 바디 부분에 설정으로 메인페이지와 서브페이지를 만들고 있는데요.
메인일때 바디 css 소스는#body {position:relative; margin:0 auto; width:880px; background-color:#FFCC99; padding-bottom:40px;;z-index:1}#main_content {width:100%; height:auto;}입니다.
html 소스는<div id="body"> <!-- 메 인 --> <!--@if($layout_info->type == "main")--> <div id="main_content"> {$content} </div> <!-- 서 브 --> <!--@elseif($layout_info->type == "sub")--> <div id="sub_left"> 좌측 2차 메뉴 </div> <div id="sub_right"> {$content} </div> <!--@end--></div>
이 부분 인데요.
메인의 결과는
위 스샷처럼 body의 높이가 높아져 게시판을 안에 담고 있습니다.
하지만 서브가 문제입니다.
위 스샷처럼 바디가 메뉴부분과 게시판 부분을 감싸지 않고 위쪽에 padding-bottom:40px 의 크기로 만들어져 있어요...
#sub_left {float:left; width:150px; height:400px; background-color:#00CC33;z-index:2}#sub_right {float:right; width:715px; background-color:#00CC33;z-index:2;}
이 부분이 서브 css 인데요.메인일때 바디 css 소스는#body {position:relative; margin:0 auto; width:880px; background-color:#FFCC99; padding-bottom:40px;;z-index:1}#main_content {width:100%; height:auto;}입니다.
html 소스는<div id="body"> <!-- 메 인 --> <!--@if($layout_info->type == "main")--> <div id="main_content"> {$content} </div> <!-- 서 브 --> <!--@elseif($layout_info->type == "sub")--> <div id="sub_left"> 좌측 2차 메뉴 </div> <div id="sub_right"> {$content} </div> <!--@end--></div>
이 부분 인데요.
메인의 결과는
위 스샷처럼 body의 높이가 높아져 게시판을 안에 담고 있습니다.하지만 서브가 문제입니다.
위 스샷처럼 바디가 메뉴부분과 게시판 부분을 감싸지 않고 위쪽에 padding-bottom:40px 의 크기로 만들어져 있어요...
#sub_left {float:left; width:150px; height:400px; background-color:#00CC33;z-index:2}#sub_right {float:right; width:715px; background-color:#00CC33;z-index:2;}
#body{*zoom:1}#body:after{clear:both; content:""; display:block;}