Question

我正在尝试在“滚动视图”的底部放置一些按钮，我已经看到了很多关于此的示例，但它似乎在我的情况下不起作用。所以我会试着解释一下：

从上图中我可以看到，我想放置“帐户图标”，如“Bane 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>

编辑：我做了一个工作的plunker，但这里问题似乎没有发生，有人能发现错误吗？ 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>

找到更新的Plunker

如何在溢出滚动的右下角放置一个div

1 个答案: