我如何獲得離子動態大小的頁眉/頁腳？

我已經在Ionic框架上取得了一些成功，但我在標籤視圖中遇到了頁眉/頁腳格式化的問題。具體來說，我需要在頁眉或頁腳中呈現多於一行的內容 - 我真的需要在其中放置幻燈片和一些文本。我發現，根據包含的內容，而不是頁眉/頁腳是一個動態大小，我發現分配給每個空間似乎是固定的。使用此摘錄的標籤看，我看到兩個被截斷頁眉和頁腳內容：我如何獲得離子動態大小的頁眉/頁腳？

<ion-view title="Bug tab"> 
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 
    <ion-content has-header="true"> 
 
    <h2>Content<h2> 
 
    </ion-content> 
 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view>

有沒有解決這個問題的方法嗎？有沒有辦法獲得一個固定但動態大小的頁眉/頁腳區域，並讓中間的其他內容滾動？

（我問的離子框架，但該網站拒絕我與「未知錯誤」一致。登錄

來源

2014-10-30 user1775230

頭的高度/頁腳是通過離子CSS設置的.bar和的.bar尺類，分別

你可以做的是：

一）重寫的.bar CSS類設置所需要的高度：

.bar{height: 80px; }

B）使用內聯樣式，設置有高度：

<ion-header-bar align-title="left" class="bar-positive" style="height: 80px;">

無論如何，我認爲這兩個選項（固定高度）是正確的方式，否則你將無法正確定位內容或副主席。

這裏有一個固定高度的代碼片段（關注「頂部」和「底部」CSS屬性，以匹配新的酒吧高度）。

angular.module('starter', ['ionic'])

.bar{ 
 
    height: 80px !important; 
 
} 
 

 
.has-header{ 
 
\t top: 80px !important; 
 
\t bottom: 160px !important; 
 
} 
 

 
.bar-footer{ 
 
\t height: 100px !important; 
 
} 
 

 
.bar-subfooter{ 
 
\t bottom: 100px !important; 
 
\t height: 60px !important; 
 
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet"> 
 

 
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script> 
 

 

 

 
<body ng-app="starter"> 
 

 
<ion-view title="Bug tab"> 
 
    
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 

 
    <ion-content has-header="true"> 
 
    <h2>Content</h2> 
 
    </ion-content> 
 

 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 

 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view> 
 
    
 
</body>

如果你想要的高度，以擴大基於內容動態，則可以使用分鐘內容 height屬性，雖然在這種情況下，你不會在事先知道頁眉，頁腳和副主題的高度時，您將無法在需要它的位置絕對div（content和subfooter）上設置合適的頂部/底部CSS，因此部分div將保持隱藏頁眉和頁腳元素。

檢查下面的代碼片段的區別：

angular.module('starter', ['ionic'])

.bar{ 
 
\t height: -moz-min-content !important; 
 
    \t height: -webkit-min-content !important; 
 
    \t height: min-content !important; 
 
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet"> 
 

 
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script> 
 

 

 

 
<body ng-app="starter"> 
 

 
<ion-view title="Bug tab"> 
 
    
 
    <ion-header-bar align-title="left" class="bar-positive"> 
 
    <h1 class="title">Header!</h1> 
 
    <h2>more header</h2> 
 
    <h2>more header</h2> 
 
    </ion-header-bar> 
 

 
    <ion-content has-header="true"> 
 
    <h2>Content</h2> 
 
    </ion-content> 
 

 
    <ion-footer-bar class="bar-subfooter" class="bar-assertive"> 
 
    <h1 class="title">Subfooter</h1> 
 
    <h2>more subfooter</h2> 
 
    <h2>more subfooter</h2> 
 
    </ion-footer-bar> 
 

 
    <ion-footer-bar align-title="left" class="bar-assertive"> 
 
    <h1 class="title">Footer</h1> 
 
    <h2>more footer</h2> 
 
    <h2>more footer</h2> 
 
    </ion-footer-bar> 
 
</ion-view> 
 
    
 
</body>

來源

2015-12-11 19:29:15

我非常晚的討論，但我可以用高：我的離子尾杆對汽車基於內容彎曲到任何高度。希望這可以幫助某人。

HTML：

<ion-footer-bar keyboard-attach class="item-input-inset bar-detail dynamic-height" ...

CSS：

.dynamic-height { 
    height: auto; 
}

來源

2016-05-22 23:57:49 djohnsonkc

謝謝你，是真棒...... – IonicBurger 2016-10-19 19:11:59

我如何獲得離子動態大小的頁眉/頁腳？

回答

相關問題