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: auto; 只能与元素的固定高度结合使用。如果元素不是固定高度，则永远不会溢出，因此 auto 永远不会应用。

考虑在 .content-right 和 .content-left 中添加 max-height 或 height 以显示滚动条。

Answer 2

你需要让你的容器知道边界是什么。所以如果你不想像@Aeolingamenfel 说的那样指定高度，你可以做绝对定位：

.content-left {
  position: absolute;
  top: 0;
  bottom: 0;
}

Answer 3

正如其他人所说，overflow 需要固定高度才能工作。在你的代码笔中，我看到你已经添加到你的 body 和 html：height:100%。如果您的意图是让左右内容也达到 window 高度的 100% 并在空间不足时滚动，则每个 children 都需要相同的 height:100%

基本上如果你添加这个

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

您的 codepen 会如您所愿。

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

中

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

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

（其中 XX 是您的 header 高度，YY 是您的页脚高度）那么它仍然会像您在这个修改后的 codepen)

中看到的一样工作

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

overflow:auto doesn't work, does not show the scroll bar

html

css

scroll

overflow