我正在为我的HTML页面滚动问题寻找CSS / Javascript解决方案。

我有三个div，其中包含一个div，一个标头和一个包装div，

我需要在包装div中使用垂直滚动条，高度应为自动或基于内容的100％。

标头应该是固定的，我不需要整体滚动条，所以我overflow:hidden在body标签中给出了信息，

我的包装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小提琴

您缺少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

我编辑了您：小提琴

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发表评论，但我没有足够的声誉。
回答有关javascript代码的问题：
您需要做的是获取父元素的高度（减去占用空间的所有元素）并将其应用于子元素。

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;