时间戳

首页 > 解决方案 > 当宽度单位为 % 时，textarea 大小变小，使用像素时工作正常

html - 当宽度单位为 % 时，textarea 大小变小，使用像素时工作正常

问题描述

Jsfiddle链接：https
://jsfiddle.net/dhanu10896/ohb3xayn/11/ 我有textarea和它下面的一条指令，我必须在textarea的右下端显示该指令，并且文本区域也是可调整大小的，所以指令应该当文本区域的大小增加时进行调整。

为此，我将 textarea 和指令包含在一个 div 中，并使其成为内联块，这将占用 textarea 的宽度并将指令对齐到右侧。

当宽度以像素为单位时，这是有效的，但当宽度为 %（百分比）时，它不起作用。

代码 ：

displayCell {
  padding: 2px 0 3px 0;
  border: 1px solid transparent;
}

.clearfix {
  display: block;
}

html form, body form {
    font-size: 14px;
    line-height: 1.42857;
    color: #32363a;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.displayInlineBlock, .inlineBlock {
    display: inline-block;
}

html textarea, body textarea {
    font-size: 14px;
    font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-size: 1rem;
    line-height: 1.42857;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    font-size: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #89919a;
    border-radius: 4px;
    color: #32363a;
    background-color: #fff;
    -webkit-transition: border-color 125ms;
    transition: border-color 125ms;
    height: 36px;
    height: var(--fd-forms-height);
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    height: 72px;
    padding-top: 12px;
}

.displayFlex {
    display: flex;
}
html .textareaInstruction, body .textareaInstruction {
    flex-grow: 1;
    width: 0px;
    text-align: right !important;
    clear: both;
    display: block;
    font-size: .85714rem;
    line-height: 1.33333;
    font-weight: 400;
    color: #51555a;
    padding: 8px 0;
    position: relative;
    padding: 0;
}

.formElementInstruction {
    color: #666666;
    white-space: nowrap;
    font-weight: normal;
}
.mr2px {
    margin-right: 2px;
}
<html>
<body>

<form>

<h2>
to fix
</h2>
  <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" style="width:100%;height:100px;width:75%;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
  
  <h2>
  should look like (also try resizing texarea)
  </h2>
   <div class="displayCell clearfix">
    <div class="inlineBlock">
      <textarea name="description" id="description" 
      style="height:100px;width:500px;"></textarea>
      <div class="displayFlex">
        <div class="formElementInstruction  textareaInstruction">
          <span class="mr2px" id="text_counter_description">1000</span>left</div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

标签： htmlcssflexboxless

解决方案

正如在包含文本区域的块上，您应用inlineBlock的已设置属性display: inline-blockdiv 的类不会拉伸到全宽，它只会占用文本区域所需的空间。

此外，当您style="width:100%;height:100px;width:75%;"在 textarea 上设置时，它将是其父级的 75%，而这里的父级是带类的 div，inlineBlock因此它将是该 div 的 75%，而不是设备宽度的 75%。

只设置width一次属性，因为最后一个将覆盖第一个。

如果您不想在这些 textarea 上设置像素，可以通过以下方法解决此问题：

.displayInlineBlock, .inlineBlock {
    display: inline-block;
    min-width: 500px;
}

<textarea name="description" id="description" style="width:100%;height:100px"></textarea>

这是查看工作解决方案的小提琴链接http://jsfiddle.net/aditi17/t2sybfr7/257/

推荐阅读