가변형 3행2단 Splitter (temp_ep_pg_v3_1v1v)

  • CSS Code

    #wrap{position:absolute; width:auto; height:auto; top:0; left:0; right:0; bottom:0; overflow:hidden;}
    #header{position:absolute; top:0px; left:0px; width:100%; min-width:1000px; height:40px; z-index:25; overflow:hidden;}
    #container{position:absolute; top:40px; left:0; right:0; bottom:40px; z-index:20;}
    * html #temp_ep_pg_v3_1v1v{height:96%;}/* IE7 hack*/
    #left_division{overflow:auto; width:200px; min-width:200px; height:100%; top:0px; left:0px; bottom:0px; z-index:30;}
    #right_division{position:absolute; width:auto; top:0px; left:0px; right:0px; bottom:0px; margin-left:0px; z-index:0; overflow:auto;}
    #footer{position:absolute; left:0px; bottom:0; width:100%; min-width:1000px; height:40px; background:#fff; z-index:100;}
    /* Splite */
    #splite_div{height:100%; width:100%; *min-height:1000px;}
    .vsplitbar{width:5px; background:#ffffff; border-left:1px solid #666; border-right:1px solid #666; cursor:e-resize;}
    /* Layout width,height,color 임의지정 - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
    div{color:#2d2c2d; font-family:Tahoma; font-size:14px; font-weight:bold;}
    #wrap{background:#f7f7f7; text-indent:10px;}
    #header{background:#e5e5e5;}
    #header p{height:40px; padding:10px 0;}
    #container{background:#ebebeb;}
    #left_division{background:orange;}
    #left_division p{height:300px; margin:10px; border:1px dashed #fff;}
    #right_division{background:red;}
    #right_division .div_con p{width:500px; height:500px; margin:10px; border:1px dashed #fff;}
    #footer{background:#e5e5e5;}
    #footer p{height:40px; padding:10px 0px;}
  • HTML Code

    <div id="wrap">
    <!-- header -->
    <div id="header">
    <p>#header</p>
    </div>
    <!-- //header -->
    <!-- container -->
    <div id="container">
    <!-- splite를 위한 div -->
    <div id="splite_div" style="position:relative;">
    <!-- left_division -->
    <div id="left_division">
    <p>.left_division(넓이,높이값 임의 지정)</p>
    </div>
    <!-- //left_division -->
    <!-- right_division -->
    <div id="right_division">
    <div class="div_con">
    <p>.right_division (넓이,높이값 임의 지정)</p>
    </div>
    </div>
    <!-- //right_division -->
    </div>
    <!-- //splite를 위한 div -->
    </div>
    <!-- //container -->
    <!-- footer -->
    <div id="footer">
    <p>#footer</p>
    </div>
    <!-- //footer -->
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../js/splitter.js"></script>
    <script type="text/javascript" src="../js/main_splitter.js"></script>