-1
嘿,我有一个嵌套在一个表中,它又嵌套在一个div中。我还有另一个应该坐在下面的div。然而这个div似乎坐在桌子的中间。我希望能够在div或卡上设置最大高度,并让表格可以滚动。这里是我的代码和链接到一个plunkr来展示我所经历的。使用嵌套表设置flex div的最大高度
HTML:
<div layout="column" style="dislpay: flex;max-height:100px !important">
<md-card flex class="white-card" style="max-height:100px !important">
<h3 class="no-margin">Table</h3>
<table style="width:100%;max-height:38%" >
<thead >
<tr id="stack-list-header">
<th >
<span>Name</span>
<i class="fa right" ></i>
</th>
<th >
<span>Age</span>
<i class="fa right" ></i>
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="person in persons track by $index"
>
<td style="width: 50%">{{person.name}}</td>
<td style="width: 50%">{{person.age}}</td>
</tr>
</tbody>
</table>
</md-card>
</div>
<div layout="column" style="dislpay: flex;max-height:100px !important">
<md-card flex class="white-card" style="max-height:100px !important">
<h3 class="no-margin">New Div</h3>
<p>This should it below the table</p>
</md-card>
JS:
function Ctrl($scope) {
$scope.persons = [
{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},{
name : "Bob",
age : "dole"
},
];
}
Plunkr:http://plnkr.co/edit/dbaoz1SjtPQdoCFyZ3xi?p=preview
任何及所有帮助是极大的赞赏。