如何在Ionic的導航欄下方使容器填充整個屏幕？

Question

我希望iframe填充導航欄下方的所有空間。 我看到Ionic正在生成內聯CSS並將類添加到html，body標簽，並且還創建了div包裝器。 我不知道實現我想要的目標的意圖是什么。 我需要為此使用一些預制的CSS類，還是編寫自己的類？ 如果是這樣，我應該怎么做，以免破壞版面。

問題不是真的關於iframe，而是關於使容器填充導航欄下方的整個空間。

目前，iframe的寬度為全寬，但高度僅為150像素，因為父容器的高度為150px。

我的應用程序基於（來自github的tabs應用程序）。

我的代碼如下：

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
  </head>
  <body ng-app="starter">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view style="width: 100%; min-height: 100%; height: 100%;">
        <!-- tab-map is shown here: -->
    </ion-nav-view>
  </body>
</html>

tab-map.html：

<ion-view view-title="Map" style="width: 100%; min-height: 100%">
  <div style="width: 100%; min-height: 100%">
    <ion-content class="padding" >
      <iframe src="../index.html" style="width: 100%; min-height: 100%">    
      </iframe>
    </ion-content>
  </div> 
</ion-view>

現在看起來像這樣：

目前看起來像這樣

Answer 1

此CSS行為我解決了問題：

.scroll{height: 100%;}

Answer 2

我認為這會更好，因為它會根據內容進行調整：

將離子導航視圖包裹在離子含量內部，並將此屬性放入離子含量標簽

overflow-scroll="true"

Answer 3

ionic.css中有一個名為.scroll的類，在本地樣式中增加了height：100％以覆蓋它，這似乎為我解決了問題。

如何在Ionic的導航欄下方使容器填充整個屏幕？

問題描述

3 個解決方案

解決方案1
20 已采納 2015-01-22 08:10:14

解決方案2
5 2015-11-10 04:14:58

解決方案3
4 2015-01-20 19:26:24

如何在Ionic的導航欄下方使容器填充整個屏幕？

問題描述

3 個解決方案

解決方案1 20 已采納 2015-01-22 08:10:14

解決方案2 5 2015-11-10 04:14:58

解決方案3 4 2015-01-20 19:26:24

解決方案1
20 已采納 2015-01-22 08:10:14

解決方案2
5 2015-11-10 04:14:58

解決方案3
4 2015-01-20 19:26:24