离子页脚粘到离子含量和屏幕底部

I wanna make ion-footer, which height will depend on content height, like that

我想做离子页脚,其高度取决于内容高度,就像那样

Also , footer can't be smaller than on the 2 image (min-height).

此外,页脚不能小于2图像(最小高度)。

Content is dynamically generated (ion-list *ngFor). This is my current pseudo-code

内容是动态生成的(ion-list * ngFor)。这是我目前的伪代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Title
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let item of items">
      {{ item.name}}
    </button>
  </ion-list>
</ion-content>

<ion-footer class="footer">
</ion-footer>

CSS:

.footer{
  background-color: blue;
  min-height: 10em;
  height: auto;
}

But it's never fill all empty space on the screen, i still have like that:

但它永远不会填满屏幕上的所有空白区域,我仍然喜欢这样:

3 个解决方案

#1

The ion-footer approach will not work here as ion-footer CSS style has absolute positioning. This means its height cannot be relative to ion-content height.

离子页脚方法在这里不起作用,因为离子页脚CSS样式具有绝对定位。这意味着它的高度不能相对于离子含量高度。

The required layout can be achieved by a different approach using flex.

可以通过使用flex的不同方法来实现所需的布局。

<ion-content >
 <div style=" display: flex;flex-direction: column;height: 100%;">
     <ion-list padding-horizontal padding-top style="overflow-y: scroll;max-height: 90%;">
       <button ion-item *ngFor="let item of items">
       {{ item.name}}
      </button>
     </ion-list>
     <div style="flex: 1;background-color: blue;">Footer</div>
 </div>
</ion-content>

Remove ion-footer element from the HTML. This should give a similar layout.

从HTML中删除ion-footer元素。这应该给出类似的布局。

#2

try

height:100%;

it worked on for me just now.

它刚刚适用于我。

Footer was extended as the items grew or shrank.

随着项目增长或缩减,页脚被延长。

#3

-1

I'd like to propose another approach, "more ionic-way", using its own components instead of a div an a few style rules.

我想提出另一种方法,“更多离子方式”,使用自己的组件而不是div和一些样式规则。

The solution of Jay solves the problem via CSS, putting the sticky footer fixed to the bottom within the content. However, I've moved the component out of the , so, it will always remain at bottom of the page:

Jay的解决方案通过CSS解决了问题,将粘性页脚固定在内容的底部。但是,我已将组件移出,因此,它将始终保留在页面的底部:

<ion-content>
  // Page content
</ion-content>
<ion-footer>
  // Footer content
</ion-footer>

To see an online example, I've created an StackBlitz here. I hope this could be useful for you (although a bit late), and for future readers.

要查看在线示例,我在这里创建了一个StackBlitz。我希望这对你有用(虽然有点晚),对于未来的读者。

#1