我正在使用 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 文档上找到解决方案 - 也许我没有得到一些想法，但这是我尝试实现该布局的第二天，但我仍然失败。
最佳答案
我认为这是你可以用 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>
关于angularjs - Angular Material chalice 弹性盒布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39685722/