在列模式下使用角度ui.layout - 如何创建底部对齐元素

Question

我刚刚开始使用angular ui-layout来允许在用户界面中拆分窗格。

我试图创建一个底部有蓝色元素的侧边栏

有没有办法欺骗ui-layout指令来实现这个目的？我尝试做size，但这只是绝对大小，我希望蓝盒只占用一些空间（显示其内容的100％），它上面的元素需要滚动并占据其余的垂直空间

编辑：添加了HTML

<ui-layout options="{ flow: 'row' }">
    <div ui-layout-container> top part </div>
    <div ui-layout-container> blue box</div>
</ui-layout>

Answer 1

我不知道你为什么要使用ui.layout，但我不建议用它来达到你想要的效果。

ui.layout使用弹性框模型，您可以自己使用它，而无需使用其他侵入式JavaScript布局。你可以使用css完全达到你想要的效果。

这就是我为了实现你想要的只使用CSS而做的。 http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview

<div class="container flex flex-column">
  <div class="top flex flex-row flex-auto flex-stretch">
    <div class="flex-auto">Top</div>
    <div class="sidebar">sidebar</div>
  </div>
  <div style="background:blue">Bottom</div>
</div>

如果您对使用Flex布局非常感兴趣，我建议使用Angular Material Design，它比ui.layout更先进，更有意义。

要了解有关弹性框的更多信息，您可以看到此示例。 http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview