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

我想要一個iframe來填充導航欄下面的所有空間。我看到Ionic正在生成內聯CSS並將類添加到html，body標籤中，並且它還創建了div封裝器。我不知道什麼是達到我想要的目的。我是否需要爲此使用一些預製的CSS類，或者編寫我自己的？如果是這樣，我應該怎麼做，不要打破布局。如何在Ionic的導航欄下面填充整個屏幕的容器？

這個問題並不是關於iframe，它是關於讓容器填充導航欄下面的整個空間。

目前，iframe需要全寬，但只有150像素的高度，因爲父容器的高度爲150像素。

我的申請是基於（tabs application from github）。

我的代碼如下：

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

製表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>

在它看起來像這樣的時刻：

At the moment it looks like this

來源

2015-01-16 afaf12

這個CSS行我解決了問題：

.scroll{height: 100%;}

來源

2015-01-22 08:10:14

每個人都回答這個問題，但如果你這樣做，你仍然會有一個最小的滾動導致一個奇怪的行爲。 –

輝煌。這對我也是如此。 – edwardbrosens

在ionic.css中有一個名爲.scroll的類，增加了高度：100％以覆蓋當地風格，它似乎爲我解決了問題。

來源

2015-01-20 19:26:24

我覺得這工作得更好，因爲它調整到內容：

結束語內離子含量離子導航視圖，並把此屬性在離子內容標籤

overflow-scroll="true"

來源

2015-11-10 04:14:58 sebasjimenez10

因爲它不會弄亂滾動，所以更好 – User528491

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

回答

相關問題