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

Posted 2023-05-07

【中文标题】表格单元格 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%;

【参考方案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://***.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 pmargin-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;