Issue
For an application I am working on I need equal height columns. I chose to use CSS to style my column items as table's. In this way the height of each columns is indeed the maximum among column heights.
See an example here: http://jsfiddle.net/roelvd/GXe9m/
Now the height of each column is indeed 100% in each browser. The element (.container in my case) directly in each column should however also be 100%. This works fine in both Firefox and Chrome; but does not in IE10 (and most likely older ID versions).
HTML:
<div id="wrapper" class="table">
<div class="row">
<div class="column" style="width: 20%">
<div class="container empty"></div>
</div>
<div class="column" style="width: 50%">
<div class="container">
<div class="element"><p>Text</p></div>
<div class="element"><p>And more text. An complete paragraph actually.</p><p>And another one!</p></div>
<div class="element"><p>And this is even more text.</p></div>
</div>
</div>
<div class="column" style="width: 30%">
<div class="container">
<div class="element"><p>And this is even more text.</p></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 600px;
}
.table {
display: table;
height: 100%;
}
.row {
display: table-row;
height: 100%;
}
.column {
display: table-cell;
height: 100%;
vertical-align: top;
}
.container {
height: 100%;
margin: 0;
}
.container.empty {
background-color: yellow;
}
Solution
This seems to be a bug: Make a DIV fill an entire table cell
I would recommend using display: flex;
instead; the HTML is much more concise.
Fiddle: http://jsfiddle.net/GXe9m/2/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Edit: maybe this is not a bug: https://code.google.com/p/chromium/issues/detail?id=97959 After trying the flexbox it seems children elements can still not stretch to height: 100%;
in some browsers, one way to fix it is position: relative;
on the parent and position: absolute;
on the child: http://jsfiddle.net/GXe9m/3/ Another way, though probably not the best is to use the display: flex;
rules on the first column as well as on the row.
Answered By - Michael Lawton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.