[javascript] 내용이 넘치면 스크롤 해야하는 고정 위치 div가 있어야합니다.

실제로 두 가지 문제가 있지만 다른 문제를 해결하기가 더 쉽다고 생각하여 기본 문제를 먼저 해결할 수 있습니다.

메뉴의 왼쪽에 고정 위치 div가 있습니다. 오른쪽은 올바르게 스크롤되는 표준 div입니다. 문제는 브라우저 뷰 포트가 너무 작아서 전체 메뉴를 볼 수 없다는 것입니다. 스크롤 할 수있는 방법이 없습니다 (적어도 CSS는 아님). CSS에서 다른 오버플로를 사용해 보았지만 div 스크롤을 만드는 것은 없습니다. 메뉴가 포함 된 div는 min-height : 100 % 및 position : fixed.로 설정되어 있습니다. 두 속성 모두 유지해야합니다.

메뉴를 포함하는 div는 절대적으로 배치되고 높이가 100 %로 설정된 다른 래퍼 div 안에 있습니다.

콘텐츠가 너무 커서 div에 비해 세로로 스크롤되도록하려면 어떻게해야합니까?

스크롤 막대를 표시하지 않으려는 다른 문제로 이어집니다.하지만 이미 그것에 대한 답변이 있다고 생각합니다 (div를 스크롤 할 수 없기 때문에 아직 작동하지 않습니다) 우선 첫째로).

어떤 솔루션? 아마도 자바 스크립트가 필요합니까? (내가 아는 바가 거의 없음)

JS 피들 예제

문제를 일으키는 관련 코드 (여기에 전체 내용을 게시하는 것이 너무 길기 때문에) :

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

또한 높이 : 100 %를 추가하여 문제가 있는지 확인했지만 작동하지 않았지만 600px와 같은 고정 높이도 작동하지 않았습니다.

답변

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

<div id="sidebar">Menu</div>
<div id="content">Text</div>

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

.sidebar{
position: sticky;
top: 0;
}

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}