아래 사진처럼

저기 다이제 나와있는곳이 content 의 범위이고 css  content {height:100%} 그리고 {height:auto;} 값을 줘봤는데도 
해당 상품이 content 범위 밖으로 벗어나서요. 지금 content 에 background 값을 줬는데 사진과 같이 
백그라운드 범위를 벗어낫어요 . 

저 해당상품이 나오는 곳 content 랑 그 좌측 st_menu, rd_sub 도 height 100% 값을 줬는데 스크롤바가 생겨 아래로 내리면 범위밖이에요  

'

제가 뭔가 잘못하고 있는건가요.. 이거 ...... 참 -_- ; 어렵네요.. 

브라우저? 모니터? 상의 height 값으로 바뀌는건지.. ; 

--- 링크에요 --

http://iovehong3.cafe24.com/product/list.html?cate_no=6

--- 소스에요 -- 

<style>

* {margin:0;padding:0;} 

html, body {width:100%; background:#2f2f2f; min-width:100%;margin:0;padding:0;min-height:100%;height:100%;} /*For IE height 100%*/

a { text-decoration:none; color:202020;}

#wrap {width:100%; height:100%;}

#st_menu {position:relative;border-right:1px solid #e6e7e8;height:100%; width:15%; background:#F1F1F1;float:left;}

#arrow_bg {  position:absolute; right:-10px; top:50%; border:10px solid transparent;  border-left:10px solid #F1F1F1; border-right:none; z-index:2;}

#arrow_bd { position:absolute;right:-11px;top:50%; border:10px solid transparent; border-left:10px solid #e6e7e8; border-right:none;z-index:1;}

#st_menu .home {float:left; width:90%; height:20%; color:#ffffff; background:#000; margin:0 auto;margin-left:5%; margin-top:5%;  }

#gnb {float:left; width:90%; height:20%; color:#ffffff; background:#919191; margin:0 auto;margin-left:5%; margin-top:5%; }

#gnb ul li { display:inline;list-style:none;}

#rd_sub {height:100%; width:15%; background:#FFFFFF;float:left; position:relative;border-right:1px solid #e6e7e8; }

#ar_bg {  position:absolute; right:-10px; top:10%; border:10px solid transparent;  border-left:10px solid #ffffff; border-right:none; z-index:2;}

#ar_bd { position:absolute;right:-11px;top:10%; border:10px solid transparent; border-left:10px solid #e6e7e8; border-right:none;z-index:1;}

#rd_sub .menu {width:90%; height:100%; margin:0 auto; list-style-type:none; font-family:'나눔고딕';}

#rd_sub .menu ul { list-style: none; }

#rd_sub .menu ul li { color:#000000;}

#content {padding-left:30px;height:100%; width:800px; background:#ffffff; float:left;border-right:1px solid #e6e7e8;}

#quick_right {float:left; width:150px; height:100%;}

#floatR {width:100px;height:150px;border:1px solid blue; border-radius:20px;}

#floatR ul {}

#floatR ul li {list-style:none; text-align:center; margin:4px 0 0 0;}

  #footer {

            

            left:0px;

            bottom:0px;

            width:100%;

            height:50px;

            background:#e5e5e5;

            z-index:2;

        }

</style>

<div id="wrap">

   <!-- main menu -->

   <div id="st_menu">

  <div id="arrow_bg"></div>

    <div id="arrow_bd"></div>

  <div class="home">로고</div>

  <div style="clear:both"></div>

  <div id="gnb">

  <ul><a href="#">aaa</a>

  <li>dddd</li>

  <li>rrrrr</li>

  </ul>

 </div>

   </div>

  

  <!-- sub menu -->

    <div id="rd_sub">

    <div id="ar_bg"></div>

    <div id="ar_bd"></div>

   <div class="menu">

   <ul>

   <li>Sub Menu, Banner, Img</li>

   </ul></div>

   </div>

   

   <!-- content main -->

   <div id="content">

  content

   </div>

 

 <div id="quick_right">

  <div id="floatR">

  <ul>

  <li><a href="#">Quick menu1</a></li>

  <li><a href="#">Quick menu2</a></li>

  <li><a href="#">Quick menu3</a></li>

  <li><a href="#">Quick menu4</a></li>

  </ul>

  </div>

   </div>

</div>