# Footer hiding content

**URL:** <https://forum.ionicframework.com/t/footer-hiding-content/67577>\
**Category:** ionic-v3\
**Created:** [October 20, 2016, 7:31am UTC](https://forum.ionicframework.com/t/footer-hiding-content/67577 "2016-10-20T07:31:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dndr](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@dndr](https://forum.ionicframework.com/u/dndr)\
**Post date:** [October 20, 2016, 7:31am UTC](https://forum.ionicframework.com/t/footer-hiding-content/67577/1 "2016-10-20T07:31:16Z")

</div>

I have a page with the following basic structure:

```auto
<ion-header>
    <ion-navbar></ion-navbar>
</ion-header>
<ion-content has-bouncing="true"></ion-content>
<ion-footer>
    <ion-toolbar></ion-toolbar>
</ion-footer>

```

However, the footer is hiding the bottom part of the content, and it cannot be scrolled. I could fix this in Chrome dev tools by setting a `margin-bottom` of the `scroll-content` div equal to the height of the footer, but I don’t know how to set it conditionally (as we don’t always show the footer).

Anyone knows how to fix this?

---

<div class="post-metadata">

**Author:** ![maggie001](https://avatars.discourse-cdn.com/v4/letter/m/278dde/32.png) [@maggie001](https://forum.ionicframework.com/u/maggie001)\
**Post date:** [October 20, 2016, 9:06am UTC](https://forum.ionicframework.com/t/footer-hiding-content/67577/2 "2016-10-20T09:06:58Z")

</div>

Your structure is correct and works fine for me. What Beta/RC version of Ionic are you using?

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [October 20, 2016, 4:53pm UTC](https://forum.ionicframework.com/t/footer-hiding-content/67577/3 "2016-10-20T16:53:53Z")

</div>

@dndr If your header or your footer has a toolbar that is shown dynamically (and maybe in other cases) **you need to resize the content to update its size according to the new size of the header and the footer** (because they are fixed in the screen).

I don’t know if this is your case, but you can give a try:

```
import { Component, OnInit, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
	selector: 'my-page',
	template: `
		<ion-header>
			<ion-navbar color="primary"></ion-navbar>
		</ion-header>
		<ion-content has-bouncing="true">
			<span *ngFor="let item of items">
				{{ item }}<br>
			</span>
		</ion-content>
		<ion-footer *ngIf="showFooter">
			<ion-toolbar color="primary"></ion-toolbar>
		</ion-footer>
	`
})
export class MyPage implements OnInit {
	@ViewChild(Content) content: Content;
	public showFooter = false;
	public items = [];

	ngOnInit() {
		for (let i = 1; i <= 50; i++) {
			this.items.push('Item ' + i);
		}

		setTimeout(() => {
			this.showFooter = true;

			setTimeout(() => {
				this.content.resize();
			}, 3000);
		}, 3000);
	}
}

```

In the example, after 3 seconds the footer is shown, but it will hide part of the content. Then, after 3 seconds (6 seconds from the beginning), the content is resized and all the content is visible.

(The `@ViewChild` must be in the page component, that is, the one that has the `ion-content` tag.)

**So, you just need to call resize right after you make changes that can affect the size of the header or footer.**

---

<div class="post-metadata">

**Author:** ![Technbuzz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/technbuzz/32/110789_2.png) [@Technbuzz](https://forum.ionicframework.com/u/Technbuzz)\
**Post date:** [April 3, 2018, 6:36am UTC](https://forum.ionicframework.com/t/footer-hiding-content/67577/4 "2018-04-03T06:36:40Z")

</div>

I second with above answer. When ever you and dynamically adding component to your view and fixed content is hiding your content: this means the ion-content need to be resize. That’s because ion-content is also fixed size.

**Content.resize()** is the way to go.