CSS：通过textarea动态调整高度

Question

当textarea被拖动/调整大小时，如何让容器的大小适应大小？这是一种模式。目前，当我调整textarea的大小时，它会从容器溢出。

下面是我的CSS和HTML：

.dialog-box { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top:0; 
 
    left:0; 
 
    z-index: 1000; 
 
} 
 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top:0; 
 
    left:0; 
 
    z-index: -1; 
 
} 
 
.container{ 
 
    background-color: #fff; 
 
    width: 600px; 
 
    height: 460px; 
 
    position: absolute; 
 
    border-radius: 5px; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    margin: auto; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    align-items: center; 
 
    z-index: 1; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container" > 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
      <label>Name</label> 
 
      <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
      <label>Remarks</label> 
 
      <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>

Answer 1

见，如果你想这样的事情...

.dialog-box { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    /* become a flex-container */ 
 
    display: flex; 
 
    /* center flex-items vertically */ 
 
    align-items: center; 
 
    /* center flex-items horizontally */ 
 
    justify-content: center; 
 
} 
 

 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.container { 
 
    background-color: #fff; 
 
    /* take size of content */ 
 
    display: inline-block; 
 
    /* setting minimum size */ 
 
    min-width: 600px; 
 
    max-width: calc(100% - 30px); 
 
    min-height: 400px; 
 
    max-height: calc(100% -30px); 
 
    border-radius: 5px; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    z-index: 1; 
 
    margin: 30px; 
 
} 
 
.remark{ 
 
    max-height:70vh; 
 
    max-width:60vw; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container"> 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
     <label>Name</label> 
 
     <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
     <label>Remarks</label> 
 
     <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>

Answer 2

您可以更改以下的事情：

• 设置display: inline-block为container采取的内容大小。并用min-width: 600px和min-height: 400px代替width: 600px和height: 400px。
• 不需要绝对定位container。为了集中您可以在这里使用flexbox。

演示：

.dialog-box { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    /* become a flex-container */ 
 
    display: flex; 
 
    /* center flex-items vertically */ 
 
    align-items: center; 
 
    /* center flex-items horizontally */ 
 
    justify-content: center; 
 
} 
 

 
.dimmer { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.container { 
 
    background-color: #fff; 
 
    /* take size of content */ 
 
    display: inline-block; 
 
    /* setting minimum size */ 
 
    min-width: 600px; 
 
    min-height: 400px; 
 
    border-radius: 5px; 
 
    border: 1px solid #ebebeb; 
 
    padding: 20px; 
 
    z-index: 1; 
 
}

<div class="dialog-box" *ngIf="showDialogBox"> 
 
    <div class="dimmer" (click)="hide()"></div> 
 
    <div class="container"> 
 
    <h3> 
 
     <ng-content></ng-content> 
 
    </h3> 
 
    <form class="ui form" [formGroup]="dialogForm" novalidate> 
 
     <div class="field required"> 
 
     <label>Name</label> 
 
     <input type="text" class="name" formControlName="name" placeholder="Enter Name..." maxlength="100" required/> 
 
     </div> 
 
     <div class="field"> 
 
     <label>Remarks</label> 
 
     <textarea class="remark" formControlName="remark" placeholder="Enter Remarks..." maxlength="1000"></textarea> 
 
     </div> 
 
    </form> 
 
    <ng-content select="[action]"></ng-content> 
 
    </div> 
 
</div>