基于模板内

Question

如何调整页脚位置，在路由后如果模板内容较少则应将其固定在位，另一个模板中的内容多于页脚位置应该是相对的。 在公司页面页脚位置应该是固定的。 在类别页面页脚位置应该是相对的。 （假设类别页面在div标签内有更多内容）

app.component.html

<header>
  Header Contents
</header>
<nav class="navigation">
  <ul>
  <li role="presentation" routerLink="/category" routerLinkActive="activeTab">
  <a><span>Category</span></a>
  </li>
  <li role="presentation" routerLink="/company" routerLinkActive="activeTab">
   <a><span>Company</span></a>
  </li>
  </ul>
</nav>
<router-outlet></router-outlet>
<footer>
  Footer Contents
</footer>

company.html

<section> 
  <md-card>
    <div>

    </div>
 </md-card>
</section>

category.html

<section> 
  <md-card>
    <div>
      <table>
        <thead>
          <th>Name</th>
          <th>Type</th>
          <th>Image</th>
          <th>Action</th>
        </thead>
        <tbody>
          <th>XYZ</th>
          <th>Type</th>
          <th>Image</th>
          <th>Nothing</th>
        </tbody>
       </table>
     </div>
   </md-card>
 </section>

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

}