Question

我正在使用angular-material webkit，我遇到了容器的高度问题，该容器始终根据设备进行设置。我遇到的问题是与子元素一起离开＆＃39;中间容器和页脚区域上的渲染。在图像上，数字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>

我无法在角度材料文档上找到解决方案 - 也许我没有得到一些想法，但是第二天我正在努力实现这种布局，而且我＆＃39 ; m仍然失败。

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

棱角分明物质圣杯弹壳设计

1 个答案: