내용이 넘치면 스크롤 해야하는 고정 위치 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와 같은 고정 높이도 작동하지 않았습니다.

사용의 문제점 height:100%은 페이지의 100 %가 아니라 페이지의 100 %가된다는 것입니다. 고정되지 않은 컨텐츠는 스크롤 막대없이 100 % 높이의 고정 된 컨텐츠를 포함 할 수있을만큼 길기 때문에 표시되는 문제점이 발생합니다. 브라우저는 실제로 그 막대를 아래로 스크롤하여 볼 수 없다는 것을 알거나 신경 쓰지 않습니다.

fixed수행하려는 작업을 수행하는 데 사용할 수 있습니다 .

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

이 바이올린 포크는 내 수정을 보여줍니다 : http://jsfiddle.net/strider820/84AsW/1/

다음은 두 가지 수정 사항입니다.

먼저 고정 사이드 바와 관련하여 오버플로가 발생하도록 높이를 제공해야합니다.

HTML 코드 :

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

CSS 코드 :

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%;}
}

라이브 예 : http://jsfiddle.net/RWxGX/3/

콘텐츠가 div 높이에 넘치면 스크롤 막대를 얻지 못할 수 없습니다. 그래서 화면 높이에 대한 미디어 쿼리를 추가했습니다. 화면 크기를 짧게 조정하여 스크롤을 표시하지 않아도됩니다.

건배, 이그나시오

일반적으로, 고정 부분은 설정되어야한다 width, height그리고 top, bottom그렇지 않으면 그것의 크기와 위치를 인식하지 속성.

사용 된 상자가 신체의 직접적인 자식이고 이웃이 있는 경우 서로 겹칠 수 있으므로 내용을 스크롤하는 동안 마우스로 가리키면 영향을 줄 수 있으므로 확인 z-index하고 top, left속성 을 지정하는 것이 좋습니다 .

다음은 body일반적으로 모바일 탐색과 함께 사용되는 콘텐츠 상자 (직접 태그 하위)에 대한 솔루션입니다 .

.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;
}

이것이 누군가를 돕기를 바랍니다.

내가 원하는 것처럼 비슷하지만 수평 방향으로 무언가를하려고하는 사람에게 답을 남기십시오 .

@ strider820 의 대답을 아래와 같이 조정 하면 마술이됩니다.

.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;
}

그게 다야. 또한이 확인 코멘트 @train을 사용하여 설명 overflow:auto이상을 overflow:scroll.