Css 角度简单页脚问题（在子组件中使用ngFor循环）

我在angular4应用程序中尝试创建页脚时遇到问题。问题似乎是，如果应用路由器中加载的子组件的高度大于其父组件的高度。。。父组件上的页脚不在整个页面的底部，而只在父组件的底部

例如

我已将页脚放在app.component.html文件的最底部：

<div class="contain">
  <div id="splashbackground">
    <div class="dark-overlay">
      <app-header></app-header>
      <div class="container mt-5">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

<app-footer></app-footer>

除了附加到其他.css文件之外，还有这些文件，但它们都不能真正处理卡片元素的定位或其他任何事情。我可以向footer元素添加什么来确保它位于底部

.center-block {  
  display: block;  
  margin-right: auto;  
  margin-left: auto;  
}  

.clickable{
    cursor: pointer;
}

.borderThin{
    border: 1px gray inset;
    border-radius: 15px;

}

.vertical-align {
    position:relative;
    top:50%;

}


.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  margin-bottom: -1.25em;
}

.panelTheme {
    background-color: #222;
     color:#999;
     border-radius: 5px;
}


/*Image Insertion*/

.customClass {
    background-color: #222;
    border-radius: 5px;
    margin:5px;
    width: 500px;
}

.customClass .img-ul-upload {
    background-color: #222 !important;
}

.customClass .img-ul-clear {
    background-color: #222 !important;
}

.customClass .img-ul-drag-box-msg {
    color: purple !important;
}

.customClass .img-ul-container {
    background-color: #222 !important;
}



/*Image Insertion*/

/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
    .col-sm-offset-0,
    .col-md-offset-0,
    .col-lg-offset-0 {
        margin-left: 0;
    }
}

.modal-content{

    background-color: #222;
    border-color: #222;
    border-radius: 0;
}


.modal-header{

    border-bottom: 0px !important;
}

.modal-backdrop{
    background-color: red;
}
.customClass {
    background-color: #D21C1C;
    border-radius: 5px;
    margin:auto;
    width: 50%;
}

.customClass .img-ul-upload {
    background-color: #222 !important;
}

.customClass .img-ul-clear {
    background-color: #222 !important;
}

.customClass .img-ul-drag-box-msg {
    color: purple !important;
}

.customClass .img-ul-container {
    background-color: #222 !important;
}

解决了

问题似乎在于app-component.html中DIV的组织方式： 从：

<div class="contain">
  <div id="splashbackground">
    <div class="dark-overlay">
      <app-header></app-header>
      <div class="container mt-5">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

<app-footer></app-footer>

为此：

<div id="splashbackground">
  <div class="dark-overlay">
    <app-header></app-header>
    <div class="container mt-5">
      <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
</div>

修正了这个问题

.center-block {  
  display: block;  
  margin-right: auto;  
  margin-left: auto;  
}  

.clickable{
    cursor: pointer;
}

.borderThin{
    border: 1px gray inset;
    border-radius: 15px;

}

.vertical-align {
    position:relative;
    top:50%;

}


.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  margin-bottom: -1.25em;
}

.panelTheme {
    background-color: #222;
     color:#999;
     border-radius: 5px;
}


/*Image Insertion*/

.customClass {
    background-color: #222;
    border-radius: 5px;
    margin:5px;
    width: 500px;
}

.customClass .img-ul-upload {
    background-color: #222 !important;
}

.customClass .img-ul-clear {
    background-color: #222 !important;
}

.customClass .img-ul-drag-box-msg {
    color: purple !important;
}

.customClass .img-ul-container {
    background-color: #222 !important;
}



/*Image Insertion*/

/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
    .col-sm-offset-0,
    .col-md-offset-0,
    .col-lg-offset-0 {
        margin-left: 0;
    }
}

.modal-content{

    background-color: #222;
    border-color: #222;
    border-radius: 0;
}


.modal-header{

    border-bottom: 0px !important;
}

.modal-backdrop{
    background-color: red;
}
.customClass {
    background-color: #D21C1C;
    border-radius: 5px;
    margin:auto;
    width: 50%;
}

.customClass .img-ul-upload {
    background-color: #222 !important;
}

.customClass .img-ul-clear {
    background-color: #222 !important;
}

.customClass .img-ul-drag-box-msg {
    color: purple !important;
}

.customClass .img-ul-container {
    background-color: #222 !important;
}

<div class="contain">
  <div id="splashbackground">
    <div class="dark-overlay">
      <app-header></app-header>
      <div class="container mt-5">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

<app-footer></app-footer>

<div id="splashbackground">
  <div class="dark-overlay">
    <app-header></app-header>
    <div class="container mt-5">
      <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
</div>