CSS：通过文本区域的动态高度答案

【问题标题】：CSS: Dynamic height via textareaCSS：通过文本区域的动态高度
【发布时间】：2017-07-18 03:28:24
【问题描述】：

当文本区域被拖动/调整大小时，如何使模态容器适应大小？顺便说一句，这是一个模态。目前，当我调整 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>

【问题讨论】：

.dialog-box .container { overflow: auto; }。当高度高于模型容器时，它会添加一个滚动条
仅供参考，当我运行示例时，此处没有任何内容（但重新校准的滚动条）（FF59）。

标签： html css modal-dialog textarea containers

【解决方案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>

【讨论】：

【解决方案2】：

您可以更改以下内容：

将display: inline-block 设置为container 以获取内容大小。并将width: 600px 和height: 400px 替换为min-width: 600px 和min-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>

【讨论】：