html - 文本区域 CSS {高度 : 100%} in table-cell div (IE)

Question

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

如何强制文本区域垂直填充表格单元格 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%;
}

Answer 1

根据 this article ，您会发现使用表格单元结构无法实现您想要做的事情。这是一个 fiddle ，演示了当您删除所有高度 CSS 时会发生什么。剧透警报:没有任何反应，因为您的高度标签都没有值。

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

高度/宽度 CSS 百分比基于具有已定义高度或宽度的最近父元素，不包括 display: table* 元素。在你上面的例子中，不存在这样的元素，所以所有的高度标签都没有效果。

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

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

fiddle :http://jsfiddle.net/py4gs/12/

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

不幸的是，这个解决方案对您来说可能不是最优的，因为它不适用于多行。没有用于将 CSS 计算高度传播为 IE 中同级元素的 CSS 实际高度的纯 CSS 解决方案。您将需要在父项上定义一个高度属性，然后您可以将其传播给子项。

虽然有选择。如果文本区域与缩略图元素的大小相同是绝对必要的，并且缩略图高度确实是可变的，那么您可以 Hook 到页面上的呈现事件(例如 $(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 来缩放图像的最大高度和最大宽度，这将考虑纵横比(但计算量相对较大)，或者您可以预处理图像并将它们缩放为所需的高度。