고정 오른쪽 사이드 div 스크롤

왼쪽 탐색함에 하나의 오른쪽 탐색 모음과 내용이 표시 될 계획입니다. 비슷한 질문을 검색해 보았지만 솔루션을 구현하려했지만 내 질문에 대답하지 않는 것 같습니다. 누군가 내가 올바른 방향으로 나를 가리킬 수 있다면, 나는 그것을 크게 감사 할 것입니다 !! :)고정 오른쪽 사이드 div 스크롤

업데이트 : http://jsfiddle.net/allenchuang/REWZ4/3/. 여기까지 내가 무엇을 가지고 있지만 창이 크기가 조정되고 스크롤해야 할 때 스크롤 막대는 브라우저 창의 오른쪽에있는 대신 오렌지색 div 바로 옆에 나타납니다. 어쨌든 주위를 둘러 볼 수 있습니까?

HTML

<body> 
    <div id="page"> 
    <header id="sidebar"> 
     <h1>Sidebar (Fixed Width)</h1> 

     <nav role="navigation"> 
     <ul> 
      <li><a href="#">Link One</a> 
      </li> 
      <li><a href="#">Link Two</a> 
      </li> 
      <li><a href="#">Link Three</a> 
      </li> 
     </ul> 
     </nav> 
    </header> 
    <article id="contentWrapper" role="main"> 
     <section id="content"> 
      <h1>Content (Fluid Width)</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
    </article> 
    </div> 
</body>

출처

2013-01-09 alchuang

? 오른쪽에 사이드 바를 두는 것은 전혀 어렵지 않아야합니다. – Robin

@Robin 제공 한 웹 사이트의 코드를 수정했지만 작은 창에서 탐색 할 때 왼쪽 내용에 스크롤이 표시됩니다. 전체 창을 스크롤하고 오른쪽 탐색 모음을 고정 시키길 원합니다. 해결 방법은 무엇입니까? 참조 : http://jsfiddle.net/allenchuang/REWZ4/1/show/ – alchuang

.span9 { 
float: left; 
} 

.span3 { 
float: right; 
}

출처

2013-01-09 17:27:48 primetwig

나는 이것을 시도했지만 작동하지 않는다. 스크롤바는 브라우저 오른쪽에있는 대신 span9 옆에 나타납니다. 해결 방법은 무엇입니까? – alchuang

그냥 100 % 높이를 가질 필요가 열이 코드를 제공합니다.

span 
{ 
    position:absolute; 
    height:100%; 
}

또한 상위 요소의 높이는 100 % 여야합니다. 당신은 일반적 있음을 설정할 수 있습니다으로 : http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/ : 무엇 이것에 대해

html, body 
{ 
    width:100%; 
    height:100%; 
}

출처

2013-01-09 20:24:07 shash7

고정 오른쪽 사이드 div 스크롤

답변

관련 문제