angular-material 圣杯 flexbox 布局答案

【问题标题】：angular-material holy grail flexbox layoutangular-material 圣杯 flexbox 布局
【发布时间】：2017-02-02 18:53:10
【问题描述】：

我正在使用 angular-material webkit，但容器的高度总是根据设备进行设置。我遇到的问题是子元素“离开”中间容器并在页脚区域呈现。在图像上，数字 1 表示绿色区域的内容小到足以适合设备高度的情况。 2 号显示了我的问题，3 号是我的理想布局：

我的布局是这样的：

<body layout="column">
  <div> header </div>
  <div layout="row" flex">
    <md-sidenav md-is-locked-open="true" flex="20"></md-sidenav>
    <div layout="column" flex ui-view></div>
    <md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav>
  </div>
  <div class=footer"></div>
</body>

我在 angular-material 文档上找不到解决方案 - 也许我没有得到一些想法，但这是我尝试实现该布局的第二天，但我仍然失败了。

【问题讨论】：

标签： angularjs flexbox angular-material

【解决方案1】：

我认为这是你可以用 flex 做的最好的事情 - CodePen

标记

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex>
  <div style="background:red; height:100px"></div>
  <div layout="row" flex="90">
    <div style="background:blue" flex="10"></div>
    <div layout="column" flex="80">
      <div >
          <!-- content -->
      </div>
      <div style="background:yellow; height:100px"></div>
    </div>
    <div style="background:blue" flex="10"></div>
  </div>
</div>

【讨论】：

感谢您的帮助！不幸的是，这不是我想做的。我不希望内容溢出，我希望该容器具有更大的高度，以便页脚将低于内容和导航栏。我不想在内容中固定页脚或内部滚动。 100% 清楚 - 在你的代码笔中，当你删除溢出时，页脚在中间 - 我希望它在底端
@KonradJanczyk - 查看更新。我认为您必须专门为页眉和页脚定义高度，但这不是问题，因为您可能希望修复它们。
谢谢！以为我可以用更“干净”的方式做到这一点，但应该这样做
@KonradJanczyk 是的，我知道你的意思，但似乎没有办法用 flex 定义页眉和页脚的高度，除非页面的高度由 flex 控制.