我如何获得离子动态大小的页眉/页脚？

我已经在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

我如何获得离子动态大小的页眉/页脚？

回答

相关问题