Is it ok to use ion-content inside a component?

I’ve got a component loading inside a page which would be great if it could have it’s own ion-content and ion-footer. Problem is when I use them, the ion-footer gets appended to the bottom with no adjustment to the ion-content margin. Here’s my code for the test component:

<ion-content>
    Content here
</ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-title>Footer here</ion-title>
    </ion-toolbar>
</ion-footer>

The parent page would look something like this:

<ion-content>
    Page content
    <div class="right-bar">
        <app-test-component></app-test-component>
    </div>
</ion-content>

Am I doing something wrong? Maybe I need to do something to the component container?