위 또는 아래로 스콜 링 할 때 Div/Box와 관련된 문제

Question

position: fixed;을 사용하여 위로 또는 아래로 스크롤 할 때 같은 위치에 상자가 유지됩니다.

카테고리 (div)가 커질 때 모든 콘텐츠가 표시되지 않는 문제가 있습니다.

예를 참조 범주의 맨 아래에없는 내용 : http://jsfiddle.net/Dyx22/

<div style="background-color:pink; height:150px; margin-bottom:10px">header </div> 

<div id="side_manu" style="float:left; width:190px; position: fixed; margin-bottom:300px;"> 
    <div style="border:1px solid black"> 
     Categories 
       <div style="padding:10px"> Cat 1 </div> 
       <div style="padding:10px"> Cat 2 </div> 
       <div style="padding:10px"> Cat 3 </div> 
       <div style="padding:10px"> Cat 4 </div> 
       <div style="padding:10px"> Cat 5 </div> 
       <div style="padding:10px"> Cat 6 </div> 
       <div style="padding:10px"> Cat 7 </div> 
       <div style="padding:10px"> Cat 8 </div> 
       <div style="padding:10px"> Cat 9 </div> 
       <div style="padding:10px"> Cat 10 </div> 
       <div style="padding:10px"> Cat 11 </div> 
       <div style="padding:10px"> Cat 12 </div> 
       <div style="padding:10px"> Cat 13 </div> 
       <div style="padding:10px"> Cat 14 </div> 
       <div style="padding:10px"> Cat 15 </div> 
       <div style="padding:10px"> Cat 16 </div> 
       <div style="padding:10px"> Cat 17 </div> 
       <div style="padding:10px"> Cat 18 </div> 
    </div> 
</div> 

<div id="itemlist" style="float:left; width:600px; margin-left:200px; margin-right:10px; "> 
     <div style="width:600px; background-color:yellow; padding: 10px;"> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 1 <br /> Item 1 <br /> Item 1</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 2 <br /> Item 2 <br /> Item 2</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 3 <br /> Item 3 <br /> Item 3</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 4 <br /> Item 4 <br /> Item 4</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 5 <br /> Item 5 <br /> Item 5</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 6 <br /> Item 6 <br /> Item 6</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 7 <br /> Item 7 <br /> Item 7</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 8 <br /> Item 8 <br /> Item 8</div> 
      <div style="margin-bottom:10px; border:1px solid black; padding:20px;"> Item 9 <br /> Item 9 <br /> Item 9</div> 
     </div> 
</div> 

<div id='display_cart' style="width:190px; float:left; font-size:12px; background-color:green "> Cart Info.</div> 

Answer 1

내용이있다, 그러나 DIV가 고정되어 있기 때문에, 당신은의 하단에 아무것도 볼 수 아래로 스크롤 할 수 없다 상자.

가능한 경우 페이지 레이아웃과 CSS에 대해 좀 더 자세히 읽으겠습니다. 예를 들어 목록을 사용하는 것이 가장 좋으며 대체 할 수있는 많은 인라인 CSS가있는 곳에서 많은 DIV를 사용하고 있습니다. 몇 줄의 CSS.

---- 편집 ----

하면이 디자인, (아마도 가장 사용자 친화적 인 또는 심미적으로 만족은 아니지만) 높이를 설정하는 것입니다 당신이 그것을 주위에 얻을 수있는 한 가지 방법을 유지하려는 가정 사이드 메뉴의 경우 오버플로를 자동으로 설정하십시오.

그래서 당신은 다음과 같이 "side_manu"사업부가 될 것이다 대체 할 :

<div id="side_manu" style="float:left; width:190px; position: fixed; margin-bottom:300px; height: 75%; overflow: auto; border:1px solid black"> 
    Categories 
      <div style="padding:10px"> Cat 1 </div> 
      <div style="padding:10px"> Cat 2 </div> 
      <div style="padding:10px"> Cat 3 </div> 
      <div style="padding:10px"> Cat 4 </div> 
      <div style="padding:10px"> Cat 5 </div> 
      <div style="padding:10px"> Cat 6 </div> 
      <div style="padding:10px"> Cat 7 </div> 
      <div style="padding:10px"> Cat 8 </div> 
      <div style="padding:10px"> Cat 9 </div> 
      <div style="padding:10px"> Cat 10 </div> 
      <div style="padding:10px"> Cat 11 </div> 
      <div style="padding:10px"> Cat 12 </div> 
      <div style="padding:10px"> Cat 13 </div> 
      <div style="padding:10px"> Cat 14 </div> 
      <div style="padding:10px"> Cat 15 </div> 
      <div style="padding:10px"> Cat 16 </div> 
      <div style="padding:10px"> Cat 17 </div> 
      <div style="padding:10px"> Cat 18 </div> 

• 이 추가 높이와 오버 플로우 매개 변수를주의하십시오, 나는 당신의 여분의 국경 사업부를 제거했는지와 border 속성을 "side_manu"div에 추가했습니다.

Answer 2

내가 방금이처럼에 맞게 콘텐츠 중 불필요한 헤더 또는 패딩을 제거 할 수 있다고 생각 :

http://jsfiddle.net/Dyx22/6/