19

I need to dynamically build a table to hold some data.
I've followed the usual approach of using divs with display: table, display: table-row and display: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}
<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Or view on Jsfiddle.

In most browsers I get the expected output:

Sample image

However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:

Sample image 2

The height: 100% set on the div surrounding "Content" is ignored.

According to CanIUse, IE8 should offer full support for the related display properties.

I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm looking to avoid), use a fixed height (ibid previous) or don't work on IE8.

Etheryte
  • 24,589
  • 11
  • 71
  • 116
  • @Guilherme Nascimento: It's not really a table. It just looks like one. – BoltClock Dec 09 '14 at 16:59
  • 1
    @GuilhermeNascimento The table will be used to hold tabular or semi-tabular data, what you're seeing is sample text to display the problem. You're missing the point of the question entirely. – Etheryte Dec 09 '14 at 17:01
  • try something like this: http://jsfiddle.net/8x347w73/ and use `p`for content, meanwhile take a look at this, it might help you: css-tricks.com/fluid-width-equal-height-columns/ – dippas Dec 09 '14 at 17:13
  • @BoltClock Precisely for this reason I put "table" in quotation marks. – Protomen Dec 09 '14 at 17:52
  • @Nit I did not miss anything, just is not clear in your question what you were trying to achieve and I asked the question just to make sure, that I was able to formulate an appropriate answer. – Protomen Dec 09 '14 at 17:54

2 Answers2

20

Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).

To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
7

For Internet Explorer 8-10 table-cells with height: 100%; have to be wrapped by table-row with height: 100%;.

Html for IE should be like:

table > table-row > table-cell

While other browsers will work properly with

table > table-row
or
table > table-cell

[edit] I reviewed the question again, and noticed You want to set 100% height not to the table-cells, but on the content inside it.

solution 1: So for Internet Explorer content-height is related to closest element with height set in absolute units, such as pixels, em's, if you want to use % height, you may also need to set 100% height on all parent elements, this will be html and body. working example

solution 2: Simply add

.content {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.elem {
    overflow: hidden;
}

You don't need to set height on Any of the parent elements in this case. working example.

Hope this helps.

Dariusz Sikorski
  • 4,309
  • 5
  • 27
  • 44