table-cell div（IE）中的Textarea CSS {height：100％} [英] Textarea CSS {height: 100%} in table-cell div (IE)

问题描述

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

如何强制textarea垂直填充table-cell div？我已经应用 height：100％到所有的父元素，但textarea仍然保持其默认高度。

屏幕截图：

我的问题示例： JSFiddle

示例代码：

HTML

 < div class =table> 
< div class =row> 
< div class =col col-sm> 
< div class =thumbnail>缩图< / div> 
< / div> 
< div class =col col-lg> 
< textarea>文本区域< / textarea> 
< / div> 
< / div> 
< / div> 
   
 
 
 
    
 $ b 
  * {
 -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 dotted＃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％; 
} 
  
 
 
解决方案
 http://css-tricks.com/absolutely-position-element-within-a-table-cell/ =nofollow>本文，您会看到您要查找的内容做不可能使用表格单元结构。这里是一个小提琴演示当你删除所有的高度CSS会发生什么。 Spoiler提醒：没有任何反应，因为您的任何高度标记都没有值。
 
 
 
  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实际高度。您将需要在父级上定义一个height属性，然后您可以将其传播到子级。
 
 
 
有选项。如果绝对需要textarea与缩略图元素的大小相同，并且缩略图的高度确实是可变的，那么您可以钩到您的页面上的render事件（例如 $（document））。 ready（））获取计算的高度，并将其设置为实际高度：
  $文档）.ready（function（）{
 //避免布局thrashing！读取然后写！
 var heights = $（'row'）。map（function（row）{return $（row）。 function（i，el）{
 $（el）.height（heights [i]）; 
} ; 
}）; 
  
但是，我是非jquery解决方案的粉丝。因此，我认为最好的解决方案可能是重新考虑你的布局。使用您对缩略图元素知道的事先设置行高或缩放缩略图元素。例如，如果您将YouTube视频嵌入为缩略图，则可以将iframe的最大高度缩放为100％，并手动将行高设置为200像素。如果您要嵌入图片，则可以使用CSS缩放图片的最大高度和最大宽度，这将尊重宽高比（但相对计算密集），或者您可以预处理图片并将其缩放为所需高度。
 
NOTE: This is only an issue in IE.

How can a force the textarea to vertically fill the table-cell div? I have applied height: 100% to all the parent elements, but the textarea still maintains its default height.

Screenshot:


Example of my problem: JSFiddle

Example code:

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

解决方案
According to this article, you'll see that what you're looking to do is impossible using a table-cell construction. Here's a fiddle demonstrating what happens when you remove all the height CSS. Spoiler alert: nothing happens, because none of your height tags have a value.

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

Height/width CSS percentages are based off the closest parent with a defined height or width, excluding display: table* elements. In your case above, no such element exists, so none of the height tags have an effect. 

I have encased your code in a body tag which has a defined width even though it is still relatively positioned. This is achieved by using an absolute positioning:
body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
Fiddle: http://jsfiddle.net/py4gs/12/

As you can see, the textarea fills the container now. This is because your table has a height and all the other elements compute their height off of the table height.

Unfortunately, this solution is probably suboptimal for you, since it wouldn't work for multiple rows. There is no CSS-only solution for propagating the CSS computed height as the CSS actual height of a sibling in IE. You will need a height attribute defined on a parent and you can then propagate that down to the child.

There are options though. If it is absolutely necessary that the textarea be the same size of the thumbnail element, and the thumbnail height is indeed variable, then you can hook into a render event on your page (such as $(document).ready()) to grab the computed height and set this as the actual height:
$(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]);
    });
});
However, I'm a fan of non-jquery solutions. Therfore, I think the best solution might be to reconsider your layout. Use what you know about the thumbnail element to set the row height in advance or scale your thumbnail element. For example, if you are embedding a YouTube video as your thumbnail, you can scale the max-height of the iframe to 100% and manually set the row height to, say, 200px. If instead you are embedding an image, you could use CSS to scale the max-height and max-width of your image, which will respect aspect ratio (but is relatively computationally intensive), or you could preprocess your images and scale them to a desired height.

                        
这篇关于table-cell div（IE）中的Textarea CSS {height：100％}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！