html - overflow:auto 不起作用，不显示滚动条

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 需要固定高度上类。在你的代码笔中，我看到你已经添加到你的正文和 html 中:height:100% .如果您的意图是让您的左右内容也为窗口高度的 100% 并在空间不足时滚动，则每个 child 都需要相同的 height:100%

基本上如果你添加这个

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

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

codepen (您的正确内容不起作用，因为您在同一个 html 标记中有两个 "class="xxxxx"...选择其中一个放在一个 class 中的类)

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

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

(其中 XX 是您的页眉高度，YY 是您的页脚高度)那么它仍然会像您在这个修改后的 codepen 中看到的那样工作。 )