CODEWITHSUNDEEP
cssangularflexbox
Nacho
Nacho

Reputation: 301

Problem with footer before render the content

Well, I tried a lot of possible solutions and ways (using flexbox, position, etc). I cannot put my footer component on bottom BEFORE the container component being rendered. I've got an spinner loader watting for async data, and right below is the footer. So it's really ugly looking at the footer and the spinner together. I'd like to put my footer always at the bottom (not fixed) without being visible. I've been reading and testing -> How do you get the footer to stay at the bottom of a Web page? but there wasn't a solution for me.

// app.component.html

<app-header></app-header>
<app-planet-data></app-planet-data>
<app-footer></app-footer>

// footer.component.html

<nav class="navbar navbar-dark bg-dark">
    <h6 class="m-2 mx-auto text-muted">Footer</h6>
</nav>

// header.component.html

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <h3 class="m-2">The Red Planet Rovers</h3>
    <ul class="nav justify-content-end">
        <button pButton type="button" label="Image of the Day"></button>
        <button pButton type="button" label="Image Gallery"></button>
      </ul>
</nav>

// planet-data.component.html

<app-loading *ngIf="loading"></app-loading>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>
<app-planet-view [pics]="pics"></app-planet-view>

Upvotes: 0

Views: 794

Answers (1)

Aditi
Aditi

Reputation: 405

You will have the main content in the webpage which is the area between the header and footer. On this main element apply this css and you will be done:

#main-component {
    min-height: calc(100vh - 70px - 100px);
}

here 70 is a height of the content + padding + margin of the header. and 100 is a height of the content + padding + margin of the footer.

This solution will work only if your header and footer size is fixed.

Upvotes: 2

Related Questions