내 HTML 페이지 스크롤 문제에 대한 CSS / Javascript 솔루션을 찾고 있습니다.

div, 헤더 및 래퍼 div를 포함하는 세 개의 div가 있습니다.

래퍼 div에 세로 스크롤바가 필요합니다. 높이는 콘텐츠에 따라 자동 또는 100 % 여야합니다.

헤더는 고정되어야하며 전체 스크롤바를 원하지 않으므로 overflow:hiddenbody 태그에 지정했습니다.

내 래퍼 div에 세로 스크롤바가 필요합니다. 이 문제를 어떻게 해결할 수 있습니까?

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

이 JS Fiddle을 참조하십시오

heightCSS 속성 이 없습니다 .

추가하면 스크롤 바가 나타납니다.

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

에서 문서 :

overflow-y

overflow-y CSS 속성은 상단 및 하단 가장자리에서 오버플로 될 때 콘텐츠를 자르거나 스크롤 막대를 렌더링하거나 블록 수준 요소의 오버플로 콘텐츠를 표시할지 여부를 지정합니다.

해결책은 height:100%;모든 상위 요소에 추가 하는 것입니다..wrapper-div 것입니다. 그래서:

html{
    height: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

.wrapper클래스 에 높이를 추가하면 스크롤이 작동하지 않고 height스크롤이 작동하지 않습니다.

이것을 시도하십시오 http://jsfiddle.net/ZcrFr/3/

CSS :

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

div에 높이를 지정하지 않았습니다. 따라서 더 많은 콘텐츠가 추가되면 자동으로 늘어납니다. 고정 높이를 지정하면 스크롤 막대가 표시됩니다.

헤더에 정적 높이를 설정하면 래퍼 크기 계산에이를 사용할 수 있습니다.

http://jsfiddle.net/ske5Lqyv/5/

예제 코드를 사용하여 다음 CSS를 추가 할 수 있습니다.

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  height: 100%;
}

.header {
  height: 64px;
  background-color: lightblue;
}

.wrapper {
  height: calc(100% - 64px);
  overflow-y: auto;
}

또는 더 동적 인 접근을 위해 flexbox를 사용할 수 있습니다. http://jsfiddle.net/19zbs7je/3/

<div id="container">
  <div class="section">
    <div class="header">Heading</div>
    <div class="wrapper">
      <p>Large Text</p>
    </div>
  </div>
</div>

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header {
  height: 64px;
  background-color: lightblue;
  flex-shrink: 0;
}

.wrapper {
  flex-grow: 1;
  overflow: auto;
  min-height: 100%; 
}

더 멋지게 만들고 싶다면이 질문에 대한 제 답변을 살펴보세요. https://stackoverflow.com/a/52416148/1513083

나는 당신의 편집 : Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

HTML 태그에 100 % 높이를 부여하는 것이 해결책입니다. 컨테이너 div도 삭제했습니다. 레이아웃이 이와 같이 유지되면 필요하지 않습니다.

@Ionica Bizau에 대해 언급하고 싶었지만 평판이 충분하지 않습니다.
자바 스크립트 코드에 대한 질문에 대한 답변을 제공하려면 :
부모의 요소 높이 (공간을 차지하는 요소 제외)를 가져와이를 하위 요소에 적용해야합니다.

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

참고
창에 플로팅 된 자식이 없거나 올바른 높이를 계산할 수있는 수정 사항이있는 경우 ".container"로 대체 될 수 있습니다. 이 솔루션은 jQuery를 사용합니다.

Angular2 + Material2 + Sidenav의 경우 다음을 수행해야합니다.

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }

제 경우 height: 100vh에는 예상되는 동작으로 만 문제를 해결합니다.

수직 스크롤바에 대해 이것을 시도하십시오.

overflow-y:scroll;