如何在溢出滚动条的右下角放置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>

查找更新的柱塞