Question

我无法解决此问题：

我想在两个元素中划分已知宽度空间：textarea和自定义滚动条的空间。 textarea具有固定高度（如果使用垂直缩放器，则为动态）。没有宽度/表格单元宽度1像素的表格/表格单元格可以完成工作，差不多......

问题在于我无法给出正确的身高和高度。右边div的宽度和位置。

如果我使用包装器来使用＆＃34;绝对位置＆＃34;方法我有正确的高度，但定位错误（你可以看到使用铬或类似的检查工具，div在外面......）如果我不使用＆＃34;绝对pos＆＃34;方法我有正确的宽度，但没有高度...（使用片段，禁用包装器和内部div的定位，看看有20px的空间。）

我对这个问题几乎感到疯狂...... 我想拥有和自动宽度＆amp;右边的高度...

任何帮助。不胜感激。

＆＃13;

<div style="display: table;width: 320px; border: 1px solid red;"">
   <div style="display: table-cell;">
     <textarea style="width: 100%; height: 100px; max-height: 200px; resize: vertical;"></textarea>                                                              </div>
   <div style="display: table-cell; width: 1px;height: 100%;position: relative;">
        <div style="display: block; position: absolute; top: 0;bottom: 0;">  
            <div style="display:block; width: 20px;">
            </div>
        </div>
   </div>
</div>

＆＃13;

Answer 1

我认为问题主要是由应用于padding的浏览器默认<textarea>引起的，您只需将box-sizing: border-box;设置为它即可。

删除绝对定位<div>，一切都应该有效，下面更新了演示。

textarea {
  box-sizing: border-box;
}
div, textarea {
  vertical-align: top;
}

<div style="display: table; width: 320px; border: 1px solid red;">
  <div style="display: table-cell;">
    <textarea style="width: 100%; height: 100px; max-height: 200px; resize: vertical;"></textarea>
  </div>
  <div style="display: table-cell; width: 1px; height: 100%; border: 1px solid blue;">
    placeholder
  </div>
</div>

表/表格/表格单元格>获得100次身高挑战

1 个答案: