Html Textarea CSS{height:100%}在表格单元格div（IE）中_Html_Css_Internet Explorer_Textarea

Html Textarea CSS{height:100%}在表格单元格div（IE）中

html css internet-explorer

Html Textarea CSS{height:100%}在表格单元格div（IE）中,html,css,internet-explorer,textarea,Html,Css,Internet Explorer,Textarea,注意：这只是IE中的一个问题。如何强制textarea垂直填充表格单元格div？我已经对所有父元素应用了height:100%，但textarea仍然保持其默认高度截图：我的问题的例子：示例代码： HTML 或者，您可以为父容器（.table）提供固定高度，如果设置为100%，则会自动为其子容器提供全高 .table{ 显示：表格；宽度：100%；高度：150像素； } 文本区 .内容可编辑{ 宽度：100%；身高：100%； } .content可编辑p{页边距顶部：0

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

如何强制textarea垂直填充表格单元格div？我已经对所有父元素应用了

height:100%

，但textarea仍然保持其默认高度

截图：

我的问题的例子：

示例代码：

HTML

或者，您可以为父容器（.table）提供固定高度，如果设置为100%，则会自动为其子容器提供全高

.table{
显示：表格；
宽度：100%；
高度：150像素；
}


文本区
.内容可编辑{
宽度：100%；
身高：100%；
}
.content可编辑p{页边距顶部：0px；页边距底部：0px；}

不幸的是，IE不支持CSS

resize

属性，因此无法垂直调整

文本区域的大小。可能需要使用垫片，如下所示：

编辑这可能有效，也可能无效，但您可以尝试以下方法：
$(document).ready(function() {
    $('textarea').parent().resize(function() {
        var $t = $(this);
        $t.find('textarea').height($t.height());
    }).resize();
});

根据，您将看到，使用表单元格结构不可能完成您想要做的事情。这里有一个小提琴演示了当你删除所有的高度CSS时会发生什么。剧透警报：什么也不会发生，因为你的所有高度标签都没有值

高度/宽度CSS百分比基于定义高度或宽度的最近父级，不包括display:table*
元素。在上面的例子中，不存在这样的元素，因此所有高度标记都不起作用
我已经将您的代码封装在一个body标记中，该标记具有定义的宽度，即使它仍然相对定位。这是通过使用绝对定位来实现的：
body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

小提琴：
如您所见，textarea现在填充了容器。这是因为您的表有一个高度，而所有其他元素都会计算它们相对于表高度的高度
不幸的是，这个解决方案对您来说可能是次优的，因为它不适用于多行。对于将CSS计算的高度传播为IE中同级的CSS实际高度，没有唯一的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缩放图像的最大高度和最大宽度，这将考虑纵横比（但计算相对密集），或者可以预处理图像并将其缩放到所需高度。
因为文本区域的大小是页面的百分比（它会相应地改变），我将jQuery和HTML行属性耦合起来，创建了一个临时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();

对我来说，最简单的解决办法是这样做：
td{
   position:relative;
}
textarea{
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
}

对于那些可能不想使用伟大但尚未完全支持的css表属性的人，您也可以这样做。应该是浏览器友好的，但我只在FireFox、IE和SlimJet中进行了测试。多行工作正常。我将文本区域设置为90%以供演示
（不确定这里的目标是什么——也许左边有多个图像和一个大的文本区域——但这也应该适用。）
jsfiddle：
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>

  * {
     -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%;
  }

第一个不适合我…它显示为10px高（如预期）。我避免了第二种方法，因为我的设计是响应性的，缩略图的大小未知。@JustinPowell，使用contenteditable div而不是textarea怎么样？同样的问题，它不会垂直填充高度。是否必须将border属性设置为contenteditable元素？这不是必需的，但用户体验会很差（没有边框，很难判断字段是否可编辑。）不起作用，因为缺少父级的高度是根本问题。感谢您的深入分析。我希望缩略图也可以改变高度，但由于我只有~4种可能的布局方案，定义行高可能是最好的。使用CSS@media查询，我根据屏幕的宽度硬编码了3种不同的行高。Th结果看起来和我的预期设计一样。你为什么不使用bootstrap或其他预构建的网格系统？我使用bootstrap。在IE上，我设置了一个td来显示：block。（我无法控制HTML。）它似乎可以工作，但可能有副作用，我可以忍受。我的世界会崩溃吗？
$(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();

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

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

  * {
     -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%;
  }