我需要在每个 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;}
感谢您的帮助。
最佳答案
正如其他人所说,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 中看到的那样工作。 )
关于html - overflow:auto 不起作用,不显示滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32506211/