角度材料布局-对齐空间-在 IE 中不起作用答案

【问题标题】：angular material layout-align space-between does not work in IE角度材料布局-对齐空间-在 IE 中不起作用
【发布时间】：2017-05-22 20:54:01
【问题描述】：

我正在为我的网络应用程序使用 angular-material，下面是我的主要模板：

<body>
  <div layout="column" layout-fill ng-controller="MainController">

    <ng-include src="'/app/main/views/sidenav.template.html'"></ng-include>
    <md-toolbar class="md-primary md-hue-2" ng-include="'/app/main/views/menu.template.html'">
    </md-toolbar>

    <md-content layout="column" layout-align="space-between stretch">
      <div ui-view></div>

      <div class="footer" ng-include="'/app/main/views/footer.template.html'">
      </div>
    </md-content>

  </div>
</body>

我在 Internet Explorer 11 上出现了一个问题。即使我将 layout-align 设置为“space-between”，根据文档，它应该将我的第二个 div（具有“footer”类的那个）放在页面底部，它不适用于 IE11。看起来第一个 div（具有 ui-view 属性的那个）的高度计算错误并且太低了。

你可以在http://ldzkklim.ayz.pl/看到它

IE 有什么解决方法吗？或者我在模板中做错了什么？

CodePen链接查看问题：http://codepen.io/anon/pen/ygOLBM

【问题讨论】：

IE11 中的垂直定位有时很粗略。但是，我认为您不应该为此使用 space-between 。确保在 `layout="column|row"` 元素中使用 flex。如果您需要更多帮助，请提供 codepen 或其他基本布局。
@kuhnroyal 我添加了一个指向 codepen 的链接。如果你在 IE 上运行它，你可以看到有什么问题。在谷歌浏览器上一切都很好。

标签： html angularjs flexbox internet-explorer-11 angular-material

【解决方案1】：

不要把layout="column" layout-align="space-between stretch"放在md-content上，如果你需要某种垂直间距，你应该总是添加一个孩子并把它放在上面。这只是根据我的经验，但它似乎也适用于此。

<md-content flex>
    <div flex layout="column" layout-align="space-between stretch">
        <div flex>content...</div>
        <div>footer</div>
    </div>
</md-content>

【讨论】：

它确实有帮助，但还有一件事。如果第一个 div 太短，则第二个 div（页脚）不在底部。 codepen.io/anon/pen/KazewY 这是一个密码笔。这是 md-content 错误 - 它的高度太小。
尝试将flex 添加到内容div。