在行布局中嵌套列布局

Question

我正在尝试实现一个嵌套的可滚动布局，它有一个左侧边栏和一个水平划分的右侧容器。以前我用过 ui-layout，它仍然很新（而且有问题）。

给定一个 Codepen

<body ng-controller="AppCtrl" layout="row" layout-fill>
    <div flex="33" class="blue">left</div>
    <div flex="66" class="green" layout-fill>
      <div layout="column" layout-align="start start">
        <div flex="25">above</div> 
        <div flex="75">below</div>
      </div>
    </div>
</body>

为什么我看不到嵌套的列布局？我希望 above 水平占据页面右侧的 25%，below 占据其余的 75%。我做错了什么，或者这甚至可以使用布局指令？

Answer 1

改变

<div flex="66" class="green" layout-fill>
  <div layout="column" layout-align="start start">
    <div flex="25">above</div> 
    <div flex="75">below</div>
  </div>
</div>

至

<div flex="66" layout="column" layout-align="start start" layout-fill class="green" >
  <div flex="25">above</div>
  <div flex="75">below</div>
</div>

您的原始代码不起作用的原因是布局="column" 不会自动将高度填充到其包含元素的 100%。

在行布局中嵌套列布局

Nesting column layout inside a row layout

angularjs

angular-material