HTML/CSS : 위치를 고정 또는 절대 설정하지 않고 div 스크롤

Question

다음과 같은 문제가 있습니다. 내 웹 페이지에 많은 콘텐츠가 포함 된 사이드 바를 추가하고 싶습니다. 따라서 사이드 바 (div)는 스크롤 할 수 있어야하며 클릭시 숨겨야합니다. 사이드 바 오른쪽에 내 콘텐츠가 있습니다. 콘텐츠는 항상 사이드 바의 오른쪽에 있어야하며 사이드 바는 콘텐츠의 일부를 오버레이해서는 안됩니다. 고정 (또는 절대) 사이드 바 스크롤과 몸이 스크롤되지 않습니다 CSS의 위치와 그와 같은 경우

div.sidebar { 
    position: fixed; 
    float:left; 
    left:0rem; 
    top:0rem; 
    bottom:1.2rem; 
    width:21rem; 
    background-color:rgb(110, 110, 110); 
    z-index:999; 
    overflow-y:scroll; 
} 
div.content { 
    border-width: 0; 
    margin: 2em; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    background-color: transparent; 
    font-size: 180%; 
    line-height: 130%; 
} 

:

여기 내 CSS입니다. 그러나 사이드 바는 내용의 일부를 숨 깁니다.
사이드 바에서 "위치 : 고정"을 제거하면 내용이 사이드 바 오른쪽 정렬되지만 사이드 바는 더 이상 스크롤 할 수 없습니다 (이제 전체 페이지에 스크롤 바가 있음). 페이지의 본문에 대해 오버플로 : 숨김을 지정해도 도움이되지 않았습니다. 왼쪽, 위쪽, 아래쪽, 부동 등 태그도 제거하지 않았습니다. 내가 뭘 놓치고 있니?

스크롤 할 수 있지만 콘텐츠를 오버레이하지 않는 사이드 바를 어떻게 얻을 수 있습니까? 어떤 도움을 주셔서 미리 감사드립니다!

Answer 1

은 내가 당신에 대한 해결책을 찾을 생각 : 두 번째 DIV에 사이드 바의

랩의 내용을 일부 클래스 속성 추가 - 내 예에 .fixed을. 이제 우리는 .fixed div를 고정시키고, .sidebar div는 그 공간을 차지할 것이므로 .content는 .fixed에 의해 겹쳐지지 않을 것입니다. .fixed와 .content에 동일한 너비를 설정하여 동일한 공간을 사용하도록하십시오. 이제 .content div에 width: auto을 설정하면 모든 공간과 overflow: hidden을 차지합니다. .sidebar이 display: none이있는 경우 지금

, 고정 숨겨되며, .content이 모든 공간을 차지합니다 : D

CSS는 :

div.sidebar { 
    /* take space on the left */ 
    float:left; 
    width:20%; 
    margin-bottom:100%; 

    background-color:rgb(0, 0, 0); 
} 

div.fixed { 
    /* display fixed menu */ 
    position:fixed; 
    width:20%; 

    left:0rem; 
    top:0rem; 
    bottom:1.2rem; 
    z-index:999; 
    rgb(110, 110, 110) 
    overflow-y:scroll; 

} 
div.content { 
    width:auto; /* take all the space */ 
    overflow:hidden; /* try using without it and see what happens ;) */ 

    border-width: 0; 
    background-color: transparent; 
    font-size: 180%; 
    line-height: 130%; 
} 

근무 예 : http://jsfiddle.net/z8dqhrf2/2/