오버플로 스크롤 CSS가 div에서 작동하지 않습니다.

오버플로 스크롤 CSS가 div에서 작동하지 않습니다.

---

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

---

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

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

CSS :

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

---

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

html{
    height: 100%;
}

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

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

---

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

---

나는 당신의 편집 : 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도 삭제했습니다. 레이아웃이 이와 같이 유지되면 필요하지 않습니다.

---

If you set a static height for your header, you can use that in a calculation for the size of your wrapper.

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

Using your example code, you can add this 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;
}

Or, you can use flexbox for a more dynamic approach 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%; 
}

And if you'd like to get even fancier, take a look at my response to this question https://stackoverflow.com/a/52416148/1513083

---

I wanted to comment on @Ionica Bizau, but I don't have enough reputation.
To give a reply to your question about javascript code:
What you need to do is get the parent's element height (minus any elements that take up space) and apply that to the child elements.

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

Note
window could be replaced by ".container" if that one has no floated children or has a fix to get the correct height calculated. This solution uses jQuery.

---

For Angular2 + Material2 + Sidenav, you'll need to do the following:

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

---

Try this for a vertical scrollbar:

overflow-y:scroll;

참고URL : https://stackoverflow.com/questions/17295219/overflow-scroll-css-is-not-working-in-the-div