angular material layout-align space-between 在 IE 中不起作用

Question

我正在为我的网络应用程序使用 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 上遇到了一个问题。即使我将布局对齐设置为 "space-between"，根据文档，它应该定位我的第二个 div（带有 class "footer") 在页面底部，它在 IE11 上不起作用。看起来第一个 div（具有 ui-view 属性的那个）的高度计算错误并且太低了。

你可以在http://ldzkklim.ayz.pl/

上看到

是否有针对 IE 的解决方法？或者我在模板中做错了什么？

CodePenlink看问题：http://codepen.io/anon/pen/ygOLBM

Answer 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>

angular material layout-align space-between 在 IE 中不起作用

angular material layout-align space-between does not work in IE

html

flexbox

angularjs

internet-explorer-11

angular-material