溢出：自动不起作用，不显示滚动条

Question

我需要在每个 md-content (content-left & content-right) 上放置一个垂直滚动条。我一直在试图解决这个问题几个小时，但它不起作用。

这是我的示例代码：http : //codepen.io/anon/pen/zvvodN

html：

  <div ng-controller="AppCtrl" class="listdemoBasicUsage" ng-app="MyApp" >
      <div layout="row" class="main">
      <div flex="50" class="left">  
        <md-content class="content-left">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>


       <div flex class="right">  
        <md-content class"content-right">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>
      </div>
    </div>

css：

body{
  overflow:hidden;}
.main{
  border: 2px solid red;}
.left{
  border: 2px solid green;}
.content-left{
  overflow:auto;}
.right{
  border: 2px solid blue;}
.content-right{
  overflow: auto;}

感谢您的帮助。

Answer 1

正如其他人已经说过的，你需要一个固定的高度overflow才能工作。在你的代码笔中，我看到你已经添加到你的 body 和 html: 中height:100%。如果您的目的是让左右内容也有 100% 的窗口高度并在空间不足时滚动，那么每个孩子都需要相同的height:100%

基本上如果你添加这个

.content-left, .content-right, .left, .right, .layout, .listdemoBasicUsage {height:100%}

你的codepen意志看起来像我想的那样。

codepen（您的正确内容不起作用，因为您"class="xxxxx"在同一个 html 标签中有两个......选择一个放在一个里面的类class）

编辑：也许您的项目将具有固定高度（或更多元素）的页眉和页脚。如果发生这种情况，您可能需要将您现在 100% 父级的容器更改为：

height:calc(100% - XXpx - YYpx);

（其中 XX 是您的页眉高度，YY 是您的页脚高度）然后它的工作方式仍然与您在此修改后的代码笔中看到的一样）