表格 / 表格单元格 / 表格单元格 > 并获得 100 高度挑战答案

【问题标题】：Table / Table cell / Table cell > and get 100 height challenge表格 / 表格单元格 / 表格单元格 > 并获得 100 高度挑战
【发布时间】：2016-01-08 02:48:52
【问题描述】：

我无法解决这个问题：

我想将已知宽度的空间划分为两个元素：文本区域和自定义滚动条的空间。 textarea 有一个固定的高度（如果您使用垂直调整器，则为动态的）。没有宽度的表格/表格单元格/表格单元格宽度 1 px 几乎可以完成工作。

问题是我无法为正确的 div 提供正确的高度和宽度以及位置。

如果我使用包装器来使用“绝对位置”方法，我的高度正确但定位错误（您可以使用 chrome 或类似的检查工具看到 div 在外面......）如果我不使用“绝对位置”方法，我有正确的宽度但没有高度......（使用 sn-p，禁用 wrapper 和内部 div 的定位，看看有 20px 的空间。）

这个问题我快疯了…… 我想为正确的 div 设置自动宽度和高度...

任何帮助 w。受到赞赏。

<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>

【问题讨论】：

假设我理解你的意图，你的 div 包裹 textarea 缺少它的结束标签...导致下一个 div 嵌套在其中而不是它的兄弟姐妹。
@JesseKernaghan mmm ... 对，但是 sn-p 运行没问题...另一方面，有什么想法吗？
第一行末尾有一个""，应该更正。

标签： css

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

【讨论】：