表格单元格 div (IE) 中的 Textarea CSS {height: 100%}答案

【问题标题】：Textarea CSS {height: 100%} in table-cell div (IE)表格单元格 div (IE) 中的 Textarea CSS {height: 100%}
【发布时间】：2014-06-02 01:52:30
【问题描述】：

注意：这只是 IE 中的问题。

如何强制 textarea 垂直填充表格单元格 div？我已将height: 100% 应用于所有父元素，但 textarea 仍保持其默认高度。

截图：

我的问题示例：JSFiddle

示例代码：

HTML

<div class="table">
    <div class="row">
        <div class="col col-sm">
            <div class="thumbnail">Thumbnail</div>
        </div>
        <div class="col col-lg">
            <textarea>Text area</textarea>
        </div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
    height: 100%;
}
.col {
    display: table-cell;
    border: 1px dashed #FF0000;
    padding: 5px;
    vertical-align: top;
    height: 100%;
}
.col-sm {
    width: 30%;
}
.col-lg {
    width: 70%;
}
.thumbnail {
    height: 150px;
    width: 200px;
    border: 1px solid #CCC;
}

textarea {
    width: 100%;
    height: 100%;
}

【问题讨论】：

标签： html css internet-explorer textarea

【解决方案1】：

根据this article，您会发现使用表格单元结构是不可能实现的。这是一个演示当你删除所有高度 CSS 时会发生什么的小提琴。剧透警告：没有任何反应，因为您的身高标签都没有值。

http://jsfiddle.net/py4gs/14/

高度/宽度 CSS 百分比基于具有已定义高度或宽度的最近父级，不包括 display: table* 元素。在您上面的情况下，不存在这样的元素，因此高度标签都没有效果。

我已将您的代码封装在一个具有定义宽度的主体标签中，即使它仍然相对定位。这是通过使用绝对定位来实现的：

body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

小提琴：http://jsfiddle.net/py4gs/12/

如您所见，textarea 现在填满了容器。这是因为您的表格有一个高度，而所有其他元素根据表格高度计算它们的高度。

很遗憾，此解决方案对您来说可能不是最理想的，因为它不适用于多行。没有纯 CSS 解决方案可以将 CSS 计算高度传播为 IE 中兄弟姐妹的 CSS 实际高度。您将需要在父级上定义一个高度属性，然后您可以将其向下传播给子级。

虽然有一些选择。如果绝对需要 textarea 与缩略图元素的大小相同，并且缩略图高度确实是可变的，那么您可以挂钩到页面上的渲染事件（例如$(document).ready()）以获取计算的高度并设置这是实际高度：

$(document).ready(function() {
    // avoid layout thrashing! read then write!
    var heights = $('row').map(function(row) { return $(row).height(); });
    $('row').each(function(i, el) { 
        $(el).height(heights[i]);
    });
});

但是，我是非 jquery 解决方案的粉丝。因此，我认为最好的解决方案可能是重新考虑您的布局。使用您对缩略图元素的了解提前设置行高或缩放缩略图元素。例如，如果您将 YouTube 视频嵌入为缩略图，您可以将 iframe 的最大高度缩放为 100%，然后手动将行高设置为 200 像素。相反，如果您要嵌入图像，则可以使用 CSS 来缩放图像的最大高度和最大宽度，这将尊重纵横比（但计算量相对较大），或者您可以预处理图像并将它们缩放到想要的高度。

【讨论】：

感谢您的深入分析。我也希望缩略图可以改变高度，但由于我只有大约 4 种可能的布局方案，所以最好定义行高。
使用 CSS @media 查询，我根据屏幕宽度硬编码了 3 个不同的行高。结果看起来与我的预期设计相同。
有什么理由不使用引导程序或其他预建网格系统？
我正在使用引导程序。
在 IE 上，我设置了一个 td 来显示：块。（我无法控制 HTML。）它似乎可以工作，尽管可能有我可以忍受的副作用。我的世界会崩溃吗？

【解决方案2】：

不幸的是，IE 似乎不支持 CSS resize 属性，因此无法垂直调整 textarea 的大小。可能必须使用垫片，就像这里的答案：

https://stackoverflow.com/a/9763121/2612012

编辑这可能会也可能不会，但你可以试试这个：

$(document).ready(function() {
    $('textarea').parent().resize(function() {
        var $t = $(this);
        $t.find('textarea').height($t.height());
    }).resize();
});

【讨论】：

不起作用，因为父级缺少高度是根本问题。

【解决方案3】：

jsfiddle

.col {
    display: table-cell;
    border: 1px dashed #FF0000;
    padding: 5px;
    vertical-align: top;
    height:10px;
}

或者您可以为父容器 (.table) 提供固定高度，如果设置为 100%，它将自动为其子容器提供完整高度

jsfiddle

.table { display: table; width: 100%; height: 150px; }

jsfiddle

      <div class="col col-lg">
      <div contenteditable='true' class='contenteditable'>Text area</div>
      </div>

.contenteditable {
    width: 100%;
    height: 100%;
    }

.contenteditable p{margin-top:0px; margin-bottom:0px;}

【讨论】：

第一个对我不起作用...它显示为 10px 高（如预期的那样）。我避免了第二种方式，因为我的设计是响应式的，而且缩略图的大小未知。
@JustinPowell，用 contenteditable div 代替 textarea 怎么样？
同样的问题，它不会垂直填充高度。
是否必须为 contenteditable 元素设置边框属性？
这不是必须的，但这会是一个糟糕的用户体验。（没有边框，很难判断该字段是否可编辑。）

【解决方案4】：

由于 textarea 的大小是页面的百分比（响应地变化），我已经结合了 jQuery 和 HTML rows 属性来创建一个临时 hack。该比率是根据我对页面大小和百分比的了解计算得出的。

$(window).resize(function(){
   var padding = 82;
   var ratio = 0.009;
   var rows = Math.floor(($('.main-container').width()-padding)*ratio);
   $('.text-area').attr('rows',rows);
}).resize();

【讨论】：

【解决方案5】：

对于那些可能不想使用出色但尚未完全支持的 css 表属性的人，您也可以这样做。应该是浏览器友好的，但我只在 FireFox、IE 和 SlimJet 中进行了测试。多行工作正常。我将文本区域设置为 90% 以进行演示。

（不确定这里的目标是什么 - 可能左侧有多个图像和一个大文本区域 - 但这也应该适用。）

jsfiddle：https://jsfiddle.net/RationalRabbit/wpsqx8kh/7/

HTML：

<body>
   <div class="table">
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area</textarea>
         </div>
      </div>
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail 2</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area 2</textarea>
         </div>
      </div>
   </div>
</body>

CSS：

  * {
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
  }
  .table {
     width:500px;
     height:100%px;
     border:1px dashed blue;
  }
  .row {
     height:200px;
  }
  .col {
     float:left;
     border:1px dashed #FF0000;
     padding:5px;
     vertical-align:top;
     height:100%;
  }
  .col-sm {
     width:30%;
  }
  .col-lg {
     width:70%;
     height:90%;
  }
  .thumbnail {
     height:150px;
     width:100%;
     border:1px solid green;
  }
  textarea {
     height:100%;
     width:100%;
  }

【讨论】：

【解决方案6】：

对我来说最简单的解决方案是这样做：

td{
   position:relative;
}
textarea{
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
}

【讨论】：