묻고답하기
레이어에 관해 질문
2009.11.17 16:51
css의 레이아웃속성은 이렇습니다.
@charset "utf-8";
/*
PXE Default layout template for XpressEngine (Dummy Version)
Markup : Hyunhw Jung
Website: http://www.premiumxe.com
Email : clubnb2@naver.com
*/
/* Browser Reset Preference - 수정하지 마십시오
---------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em }
a img { border: none; }
fieldset { border:none; }
/* Layouts - Restricted Preference - 수정하지 마십시오
---------------------------------------------------------------------------------*/
#container_site { position:relative; *zoom:1; }
#header { position:relative; *zoom:1; }
#container_body { position:relative; *zoom:1; }
#container_contents { position:relative; *zoom:1; }
#e1 { position:relative; *zoom:1; }
#e1 .wrapper { position:relative; }
#e2 { position:relative; *zoom:1; }
#e2 .wrapper { position:relative; }
#footer { position:relative; *zoom:1; clear:both }
#footer_box1 { position:relative; *zoom:1; }
#footer_box2 { position:relative; *zoom:1; }
#footer_box3 { position:relative; *zoom:1; }
#footer_sub { position:relative; *zoom:1; }
/* Layouts - Margin & Position Preference - 필요에 따라 margin 값만 수정하세요
---------------------------------------------------------------------------------*/
#container_site { margin:0 auto; }
#header { margin:100px auto 20px auto; padding:20px; }
#container_body { }
#container_contents { }
#container_contents .wrapper { padding:20px; }
#container_contents .wrapperTrans { padding:0; }
#footer { margin:20px auto 0 auto; padding:20px; }
#footer_sub { margin-top:20px; padding:20px; }
/* 사이드바 1을 좌측에 정렬 */
.ec #e1 { float:left; margin-right:10px; }
.ec #container_contents { _float:right; }
/* 사이드바 1을 우측에 정렬 */
.ce #e1 { float:right; margin-left:10px; }
.ce #container_contents { _float:left; }
/* 사이드바 1,2를 좌측에 정렬 */
.eec #e1 { float:left; margin-right:10px; }
.eec #e2 { float:left; margin-right:10px; }
.eec #container_contents { _float:right; }
/* 사이드바 1,2를 우측에 정렬 */
.cee #e1 { float:right; margin-left:10px; }
.cee #e2 { float:right; margin-left:10px; }
.cee #container_contents { _float:left; }
/* 사이드바 1,2를 양쪽에 위치시키고 컨텐츠부를 가운데로 정렬 */
.ece #e1 { float:left; margin-right:10px; }
.ece #e2 { float:right; margin-left:10px; }
.ece #container_contents { _float:left }
#e1 .wrapper { padding:25px 10px; }
#e2 .wrapper { padding:25px 10px; }
/* Layouts - Customization - 여기서부터 자유롭게 코딩합니다
---------------------------------------------------------------------------------*/
body { background:#f7f7f7; }
p { margin-bottom:10px; line-height:140%; text-align:justify; }
p a { }
a, a:visited { text-decoration: none; }
a:hover { text-decoration:none; }
#container_site { margin:0 auto; }
#header { background:#cacaca; color:#666; }
#container_body { }
#container_contents { background:#fff; text-align:justify; line-height:140%; overflow:hidden; }
#container_contents .wrapper { overflow:hidden; }
#container_contents .wrapperTrans { overflow:hidden; }
#e1 { background:#cacaca; color:#666; overflow:hidden; }
#e1 .wrapper { }
#e2 { background:#cacaca; color:#666; overflow:hidden; }
#e2 .wrapper { }
#footer { background:#cacaca; color:#666; overflow:hidden; }
#footer_box1 { width:150px; margin-right:20px; float:left; overflow:hidden; }
#footer_box2 { width:150px; margin-right:20px; float:left; overflow:hidden; }
#footer_box3 { width:150px; margin-right:20px; float:right; overflow:hidden; }
#footer_sub { background:#cacaca; color:#666; clear:both; }
그리고 레이아웃의 소스는
<!--// 레이아웃과 연동될 css 파일 import -->
<!--%import("css/default.css")-->
<!--@if($layout_info->background_image)-->
<style type="text/css">
body { background:url({$layout_info->background_image}); }
</style>
<!--@end-->
<div id="container_site"
<!--@if($layout_info->container_site_width)-->
style="width:{$layout_info->container_site_width};"
<!--@else-->
style="width:800px;"
<!--@end-->
>
<div id="header">
헤더
</div><!--header 끝-->
<div id="container_body" class="{$layout_info->layout_type}">
<!--@if($layout_info->layout_type != "c")--><!--위젯 출력 조건부 시작-->
<div id="e1"
<!--@if($layout_info->wid1_width)-->
style="width:{$layout_info->wid1_width};"
<!--@else-->
style="width:150px; height:100%"
<!--@end-->
>
<div class="wrapper">
위젯 1이 위치하는 영역
</div>
</div><!--e1 끝-->
<!--@if($layout_info->layout_type == "eec" || $layout_info->layout_type == "cee" || $layout_info->layout_type == "ece")-->
<div id="e2"
<!--@if($layout_info->wid2_width)-->
style="width:{$layout_info->wid2_width};"
<!--@else-->
style="width:150px;"
<!--@end-->
>
<div class="wrapper">
위젯 2가 위치하는 영역
</div>
</div><!--e2 끝-->
<!--@end-->
<!--@end--><!--위젯 출력 조건부 끝-->
<div id="container_contents">
<!--@if($layout_info->container_contents_style == "useBackground")-->
<div class="wrapper">
{$content}
</div>
<!--@else-->
<div class="wrapperTrans">
{$content}
</div>
<!--@end--><!--container_contents 배경선택부 끝-->
</div><!--container_contens 끝-->
</div><!--container_body 끝-->
<div id="footer">
<div id="footer_box1">
추가위젯 영역 1
</div>
<div id="footer_box2">
추가위젯 영역 2
</div>
<div id="footer_box3">
추가위젯 영역 3
</div>
</div><!--footer 끝 -->
<div id="footer_sub">
푸터 서브메뉴
</div><!--footer_sub 끝-->
</div><!--container_site 끝-->
이렇습니다. 이 소스보시면 아시는분은 알겠지만 pxe님의 기초레이아웃입니다.
이 기초레이아웃에서 위젯1부분(id:e1) 부분이 height:100%가 안됩니다.
아무리 줘도 늘어나지않는군요.
어떻게하면 100%를 줄수있을까요? widht는 잘늘어나던데.. 답답합니다
..다시올림