Textarea CSS {height: 100%} in table-cell div (IE)

Question

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

Answer 1

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.