html - How to make div 100% height of table cell in IE -


i want render 2 dimensional array of equal sized boxes, box containing longest content dictate height of boxes, decided use html table line up.

however, in ie i'm getting problem div inside table cell wont fill whole height, works fine in chrome. here snippet of markup , styles:

.boxarraytable td {     white-space: nowrap;     overflow: hidden;     padding-bottom: 30px;     padding-right: 20px; }  <table class="boxarraytable">   <tbody>     <tr>       <td><div class="box" /></td>       <td><div class="box" /></td>     </tr>     <tr>       <td><div class="box" /></td>       <td><div class="box" /></td>     </tr>   </tbody> </table>  div.box {     overflow: auto;     background-color: white;     display: inline-block;     min-width: 222px;     height: 100%; } 

why doesn't work in ie , how working? should able float child elements of box element bottom.

you shouldn't using tables layout in century. if want create table style simplest option set display: table on outer div , display: table-cell on 2 divs inside.

div {background-color: yellow;}  .outer {display: table; width: 200px} .mid {display: table-row;} .inner {display: table-cell; width: 50%}  <div class="outer">   <div class="mid">     <div class="inner">       blah     </div>     <div class="inner">       lorem ipsum dolor sit amet consecusomething blah blah blah idea.     </div>   </div> </div> 

if plan living highly recommend learning flexbox layout techbiques. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ place start.


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -