Absolute top: 0 bottom: 0 does not work inside a cell table in IE11

Question

Having created my previous questions, I have a fiddle

It has two columns over one column in small views and 3 columns in a row in other views. This works as expected. However, for the design aspect, I need space between the blocks of content. To fix this, I made an element with absolute positioning inside the cells, the size of which would correspond to the filling of the space, but left a space. This works fine in Chrome, however IE11, both the desktop, the Windows 8 application, and the Windows phone, do not work as expected.

In IE11, the blocks will only expand to match the content (although the absolute blocks do not contain any content ...) I assume that this is because IE allows for the addition of a natural cell added by the browser to make the cells the same height. Kicker: if you give the block a given height and use bottom:0 , the block will adhere to the right at the bottom of the cell.

Here's the HTML fiddle:

 <div class="table"> <div class="cell"><div class="back"></div>One Line</div> <div class="cell"><div class="back"></div>Two<br/>Lines</div> <div class="cell"><div class="back"></div>More<br/>Than two<br/>Lines</div> </div> 

and CSS:

 .table { display: table; table-layout: fixed; border-collapse: collapse; width: 100%; } .cell { display: table-cell; border: 1px solid red; position:relative; padding:0px 10px; } .back { position:absolute; top:0; bottom:0; left:10px; right:10px; background:#777; z-index:-10; } .cell:first-child .back { right:5px; } .cell:nth-child(2) .back { left:5px; } @media (max-width: 768px) { .cell:last-child { display: table-caption; caption-side: bottom; } } @media (min-width:769px){ .cell:last-child .back { left:5px; } .cell:nth-child(2) .back { right:5px; } } 

What css hacks / tricks can I use to make IE behave like Chrome? I would prefer not to use javascript to solve this problem.

Answer 1

You can try using this way

 .back{min-height: 56px;}