如何在溢出滾動條的右下角放置div

Question

我試圖在“滾動視圖”的底部放置一些按鈕，對此我已經看到了很多示例，但是對於我來說似乎不起作用。 因此，我將嘗試解釋：

從上圖中可以看到，我想放置“帳戶圖標”，就像在“班恩1”中一樣，但是當描述性文本變得比內部卡片大時，圖標似乎停留在底部的1％處。 我希望它們位於“可滾動視圖”的底部。 關於如何實現此目標的任何想法？

謝謝:)（下面的代碼）

 .task border-bottom: 1px solid #00AA9E &:last-child border-bottom: none .container padding: 0 .reperationstyper float: left background-color: white height: 100% width: 3% .smorring @extend .reperationstyper background-color: #90AB00 .kampagne @extend .reperationstyper background-color: #C14848 .reperation @extend .reperationstyper background-color: #D69966 .taskRow position: relative height: 100% margin-left: 0 overflow: auto .button background: none !important border: none padding-right: 20% float: right .task-content padding-top: 1% p color: gray .buttons padding-top: 2% padding-left: 0 padding-right: 0 .empRow float: right margin-right: -30px margin-left: -30px position: absolute right: 50% bottom: 0.1% .empButton float: right display: inline-block background: none border: none bottom: 1% 

  <div class="container task" [ngStyle]="{'height': 'calc(100% /' + event.task.length + ')'}" *ngFor="let task of event.task; let i = index"> <div class="smorring" *ngIf="event.task[i].TaskType == 0"></div> <div class="kampagne" *ngIf="event.task[i].TaskType == 1"></div> <div class="reperation" *ngIf="event.task[i].TaskType == 2"></div> <div class="row taskRow" style=" height: 100%; width: 97%"> <div class="col-10 task-content" > <h6>{{task.heading}}</h6> <p>{{task.description}}</p> </div> <div class="col-2 buttons"> <button type="button" class="button btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><md-icon class="task-info-button" [ngStyle]="{color: '#00AA9E', 'font-size': '180%'}">assignment</md-icon></button> <div class="container empRow"> <ng-container *ngFor="let employee of task.requiredPersonnel; let i = index"> <button type="button" *ngIf="task.requiredPersonnel[i].type == 1" class="empButton" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><md-icon class="task-info-button" [ngStyle]="{color: '#2CA800', 'font-size': '180%'}">assignment_ind</md-icon></button> <button type="button" *ngIf="task.requiredPersonnel[i].type == 0" class="empButton"><md-icon class="task-info-button" [ngStyle]="{color: '#CC0000', 'font-size': '180%'}">assignment_ind</md-icon></button> </ng-container> </div> </div> </div> </div> 

編輯：我已經做了工作，但在這里似乎沒有出現問題，有人可以發現錯誤嗎？ https://plnkr.co/edit/xfBpmV?p=preview

Answer 1

你必須把min-height

  .fixed-height {
    min-height: 170px;
  }

並給這堂課

    <div class="col-md-10 fixed-height">
      <h6>Heading</h6>
      <p>nascetur ridiculus mus.</p>
    </div>

查找更新的柱塞