整个内容结束后如何显示页脚？

Question

i am using ionic,hence i have a   code something like this                        <ion-header></ion-header>
<ion-content>
<div *ngFor="let publisher of publishers" class="contentspacing">
    <div class="border-div">
        <div class="chkbox">
            <input type="checkbox" class="chkBoxSize"                                       id="instituteId{{publisher.ID}}"         [checked]="publisher.preferenceValue || publisher.isSelected " (click)="capturepublishers($event,publisher.ID, publisher.Name, publisher)" />
        </div>
        <div class="listName taxonomyTitle">{{publisher.Name}}</div>
    </div>
</div>
<footer class="footerContainer">
    <strong>Copyright &copy, Synger All Rights Reserved</strong>
</footer>
</ion-content>

/* The Footer Css */
.footerContainer {
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  overflow: hidden;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid #d2d6de;
}


/* The ContentHolder that contain dynamic data */
.contentspacing {
  margin-bottom: 100% !important;
}

显示的内容以动态形式出现在我网站的所有页面中。我必须应用的CSS，以便仅在整个内容结束后才显示页脚

Answer 1

为您的页脚类添加position:fixed;bottom:0;。而且我还调整了内容间距边距。希望对您有帮助。

body {
  position:relative;
}
/* The Footer Css */
footer.footerContainer {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #d2d6de;
    padding: 15px;
    text-align: center;
}


/*The ContentHolder that contain dynamic data */
.contentspacing {
  margin-bottom: 40px;
}

<div *ngFor="let publisher of publishers" class="contentspacing">
    <div class="border-div">
        <div class="chkbox">
            <input type="checkbox" class="chkBoxSize" id="instituteId{{publisher.ID}}" [checked]="publisher.preferenceValue || publisher.isSelected " (click)="capturepublishers($event,publisher.ID, publisher.Name, publisher)" />
        </div>
        <div class="listName taxonomyTitle">{{publisher.Name}}</div>
    </div>
</div>
<footer class="footerContainer">
    <strong>Copyright &copy, Synger All Rights Reserved</strong>
</footer>

尝试更新的。这是默认的html格式。

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>