使用具有100％高度的Div的离子导航条和离子标签出现问题

Question

刚刚开始使用离子，所以我想这是一个有点新问题，但我无法做到以下几点：

- div h:100% w:100%
  - div 30% 100%
    - image 100% 100%
  - div 5% w:100%
    - button 100% 100% 
  - div 65% w:100%    
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%
    - image 50% 50%

我需要这样的东西（图像必须保持div内的宽高比）：

这是我的应用程序：

这是我的代码：

ion-view view-title="">
  <ion-pane>
    <div style="height: 100%;width:100%;position:fixed;left:0;top:0">
      <div style="padding:0;margin: 0;height: 35%;width:100%;">
        <img ng-src="images/a_i.png" style="width:100%;height: 100%">
      </div>
      <div style="padding:0;margin: 0;height: 5%;width:100%;">
        <button class="button button-block button-positive">
          Button
      </div>
      <div style="padding:0;margin: 0;height: 60%;width:100%;">
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
          <img ng-src="images/a_i.png" style="width:100%; height: 100%;">
        </div>
        <div style="padding:0;margin: 0; width: 50%;height: 50%; float: left;">
          <img ng-src="images/b_i.png" style="width:100%; height: 100%;">
        </div>        
        </div>
      </div>
    </div>
  </ion-pane>
</ion-view>

我看到的问题是on-nav-bar和ion-tabs是100％主容器的一部分（在这种情况下是离子窗格），图像范围低于标题。 也许唯一的解决方案可以使用html-css-javascript来完成，因为我还没有找到使用离子框架工具的方法。 有什么想法吗？

Answer 1

您可以使用ion-content代替ion-pane来加载ion-view中的内容。此外，离子固有地为大多数经常需要的用例提供css类。请查看css类item-image，查看以全宽渲染图像的顶部区域，button-block显示全宽按钮，col col-50以两列样式显示项目。在完整的片段下面，使用所有这些类。

   <ion-view>
    <ion-content>
     <div class="row item-image">
      <img ng-src="images/a_i.png">
     </div>
     <div class="row">
        <button class="button button-block">button</button>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
    <div class="row">
     <div class="col col-50">
      <img ng-src="images/a_i.png">
     </div>
     <div class="col col-50">
      <img ng-src="images/b_i.png">
     </div>
    </div>
   </ion-content>
  </ion-view>