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>