Question

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

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

截图： Example from my test site

我的问题示例：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%;
}

Answer 1

根据this article，您将看到使用表格单元格构造您无法实现的目标。这是一个小提示，展示了当你删除所有高度CSS时会发生什么。扰流警报：没有任何反应，因为你的身高标签都没有值。

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

高度/宽度CSS百分比基于具有定义高度或宽度的最近父级，不包括display: table*元素。在上面的例子中，不存在这样的元素，因此没有任何高度标记有效。

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

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％，然后手动将行高设置为200px。如果您要嵌入图像，则可以使用CSS来缩放图像的最大高度和最大宽度，这将考虑纵横比（但是相对计算密集），或者您可以预处理图像并将其缩放为期望的高度。

Answer 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();
});

Answer 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;}

Answer 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();

Answer 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%;
  }

Answer 6

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

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

表格单元格（IE）中的Textarea CSS {height：100％}

6 个答案: