묻고답하기

  2. Support
  3. 묻고답하기

div 높이관련 질문드립니다. 부탁드려요

2009.11.17 20:34

Ruzin

일단 소스부터 써넣습니다.

--------------------------

 

Layout.html

 



<!--// 레이아웃과 연동될 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;"
        <!--@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 끝-->

 

------------------------------------------------------------------------------

 

Css파일

@charset "utf-8";

/* Browser Reset Preference - 수정하지 마십시오
---------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em }
a img { border: none; behavior: url(../iepngfix.htc);}
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_sub { position:relative; *zoom:1; }

 

/* Layouts - Margin & Position Preference - 필요에 따라 margin 값만 수정하세요
---------------------------------------------------------------------------------*/

#container_site { margin:0 auto; }
#header { margin:0px auto 0px auto; padding:0px; }
#container_body {  }
#container_contents {  }
#container_contents .wrapper { padding:10px; }
#container_contents .wrapperTrans { padding:0; }
#footer_sub { margin-top:0px; padding:0px; }

/* 사이드바 1을 좌측에 정렬 */
.ec #e1 { float:left; margin-right:0px; }
.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:0px 0px; }
#e2 .wrapper { padding:25px 10px; }

 

/* Layouts - Customization - 여기서부터 자유롭게 코딩합니다
---------------------------------------------------------------------------------*/
body { background:#ffffff; }
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:#ffffff; 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:#ffffff; color:#666; overflow:hidden; }
#e1 .wrapper {  }

#e2 { background:#ffffff; color:#666; overflow:hidden; }
#e2 .wrapper {  }
#footer_sub { background:#ffffff; color:#666; clear:both; }

/* top 메뉴 위치*/
#top_index { position:absolute; top:275px; right:150px; _right:210px; z-index:998; text-align:left;}
#top_index span { color:#ff0000; padding-left:5px; }
#top_index a { color:#a98a60; font:.9em Tahoma; margin-right:5px;  text-decoration:none;}
#top_index .l { border-left:1px dotted #a98a60; padding-left:10px; }
#top_index a:hover,
#top_index a:focus { color:#a98a60; font:.9em Tahoma; }

/* modalWindow */
.loginWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:100;}
.loginWindow.open{ display:block;}
.loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity:30);}
.loginWindow .loginLayer{ position:absolute; width:289px; top:120px; left:50%; padding:30px; border:2px solid #737373; margin:0 0 0 -175px; background:#fff;}
.loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 29px 0;}
.loginWindow .loginLayer form:after{ content:""; display:block; clear:both;}
.loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
.loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;}
.loginWindow .loginLayer.loginTypeA form.typeA,
.loginWindow .loginLayer.loginTypeB form.typeB{ display:block;}
.loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;}
.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}
.loginWindow .loginLayer dd{ margin:0 0 21px 0;}
.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; border:1px solid #ddd; font:20px Tahoma; color:#333;}
.loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;}
.loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;}
.loginWindow .loginLayer.loginTypeA .inputText{ background-image:url(../img/bgLoginText.gif); background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../img/bgOpenidText.gif); background-repeat:no-repeat; background-position:right top; padding:6px 9px 0 35px; width:243px;}
.loginWindow .loginLayer .keep{ margin:0; float:left; font-size:11px; line-height:normal; white-space:nowrap;}
.loginWindow .loginLayer .keep label{ color:#555;}
.loginWindow .loginLayer .loginButton,
.loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; font-weight:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../img/buttonLoginAction.gif); background-repeat:no-repeat; overflow:visible;}
.loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;}
.loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 30px 0 45px; cursor:pointer;}
.loginWindow .loginLayer .help{ margin:0 -30px -30px -30px; padding:14px 0; list-style:none; text-align:center; background:#fafafa; border-top:1px solid #f2f2f2;}
.loginWindow .loginLayer .help li{ display:inline; font-size:11px; line-height:11px; padding:0 0 0 5px;}
.loginWindow .loginLayer .help li.join{ font-weight:bold;}
.loginWindow .loginLayer .help li.find{ border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer .help li.typeA,
.loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer.loginTypeA .help li.typeA,
.loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;}
.loginWindow .loginLayer .help li a{ text-decoration:none; color:#555;}
.loginWindow .loginLayer .help li a:hover,
.loginWindow .loginLayer .help li a:active,
.loginWindow .loginLayer .help li a:focus{ text-decoration:underline;}
.loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../img/buttonCloseX.gif) no-repeat center center;}
.loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}

 

 

-------------------------------------------------

 

네 여기까지가 기본레이아웃입니다.

 

제가 수정하다 막힌부분은 위젯1부분 (빨간색으로 체킹한부분)

입니다. 이 부분의 가로는 조정이되는데. 세로부분은 Height:100% 속성이 안먹힙니다.

어디가 문제인건가요??




이 게시물을
좋아요
목록
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
Oxygen82 게시판별로 인쇄 다르게 할 수 없을까요?  
싸나이김 일정 레벨이되면 그룹이 이동되게 하고 있습니다.  
왕초보임다 리눅스 서버에서 윈도우 xp로 xe이전이요 [1] 2009.11.17 by lattente
dreamworks 외부페이지 로딩시 포인트 증가 [1] 2009.11.17 by lattente
주피터TM 갤러리 가로, 세로 개수 어떻게 설정해야 하나요??  
정현준656 게시판이 꼭 두번접속해야 열리네요...  
김병선960 펼침 메뉴 가료형 스킨 [1] 2009.11.17 by 곰이넷
나석원 최근글 위젯관련 질문입니다. [3] 2009.11.17 by DuRi
왕초보임다 제로보드 이전 문제입니다. [1] 2009.11.17 by DuRi
Ruzin 레이어에 관해 질문 [1] 2009.11.17 by Ruzin
x라야x 최신글 표시 위젯 관련 질문 [1] 2009.11.17 by DuRi
레테123 최근이미지에 게시판 이름 추출하는 방법 부탁드려요^^; [1] file 2009.11.17 by DuRi
밸런스정 xe 관리자 페이지 우측 상단에 있는 Settings 인뜨는것 하고, 게시판 로딩속도~~~ [1] 2009.11.17 by 띵야
추억돌이 갑자기 관리자 페이지에서 메뉴구성이 안되요.. [2] file 2009.11.17 by 추억돌이
박문주415 회원가입배경색변경 [2] file 2009.11.17 by 박문주415
신희2 최근이미지 첨부파일 다 보이게 하는법?  
Kview 게시판에 올린 글들의 주소는 뭔가요?  
물비늘 갤러리 게시판을 찾습니다. [1] 2009.11.17 by Hammer
나석원 cafe를 삭제했더니...홈페이지가 다 없어졌네요T.T [1] 2009.11.17 by Habile
Ruzin div 높이관련 질문드립니다. 부탁드려요 [1] 2009.11.17 by Hammer
슈퍼보이 설치시 뜨는 메세지입니다. 어떻게 해결하나요? [2] file 2009.11.17 by Habile
누리안 회원의 접근 아이피만 알 순 없을까요?  
비밀얌 스마트폰으로 XE이용 관련 질문  
웅석이 예전에 많던 레이아웃 스킨들은 어디에 있는가요?? [1] 2009.11.18 by 프렌치카페
Jamming 닉네임 변경 후, 그 아이디로 예전에 썼던 글들의 닉네임을 적용하는법이 있나요  
박대정208 로그인 반응없음  
eunbini textyle 스킨적용하면 적용이 안되요 [1] 2009.11.18 by sol
배먀 게시판 오류..(수정하였으니 답변 좀 다시 달아주세요ㅠㅠ) [1] file 2009.11.18 by DuRi
봄나들이 게시판과 페이지 본문안에서 스크롤바를 어떻게만드나요? [2] file 2009.11.18 by 된장맛껌
엔시아- 레이아웃 수정시 "서버에 요청중"에서 멈춤상태  
태그 쓰기