As seen in the picture in the second cell after the second diva there is an empty space. So I can not understand how the second div to make the height stretch to the end of the cell.

alt text

Table code:

<style> .div_100 { width: 100%; height: 100%; border: 1px solid red; overflow: auto; } .simple_div { width: 100%; height: 25px; border: 1px solid red; overflow: auto; } </style> <table width="200" border="1"> <tr> <td> <div class="simple_div">asdasdasd</div> <div class="simple_div">asdasd</div> <div class="simple_div">asdasd</div> </td> <td valign="top"> <div class="simple_div">asdasdasd</div> <div class="simple_div">asdasd</div> </td> <td><div class="div_100">sdasd</div></td> <td><div class="div_100">asdasd</div></td> </tr> </table> 

Ideally, I would like to solve the problem without scripts. Thank you in advance.



    4 answers 4

    Either the script, or the change of layout, or put up with the absence of the lower border.

     td {overflow:hidden;vertical-align:top} td > div:last-child{ padding-bottom:32767px; margin-bottom:-32767px; } 

    Threat Theory and practice here: In Search of the One True Layout . True there is not a table, but the meaning is the same.

      If you solve a problem without scripts, you can slightly change the structure of divs in the table http://jsfiddle.net/NFssa/

       <table width="200" border="1"> <tr> <td> <div class="simple_div">1</div> <div class="simple_div">2</div> <div class="simple_div">3</div> </td> <td valign="top"> <div class="div_100"> <div class="simple_div">4</div> 5 </div> </td> <td><div class="div_100">6</div></td> <td><div class="div_100">7</div></td> </tr> </table> 

      A bit of CSS manipulation will look great.

      • it will not work this way ... such a structure is needed as in the example, i.e. several divs in a row with the text - Vitaliy Leonov

      there is no Javascript (I don’t even see CSS) here clean HTML read http://htmlbook.ru/samhtml/tablitsy/obedinenie-yacheek http://htmlbook.ru/html/td/colspan because your table is not properly framed ( change the structure of the HTML code) because without Divov it will be much easier here or to make this element complete with a div-layout

      • What is the merging of cells? need just such a structure - Vitaly Leonov

      Is it possible to simply make for those divs whose 2 is 50% high, or can you have them 1 and 2 and 3 and each should have one class?

      • there can be as many divs as you like in any column. therefore, it is necessary that the last in each of them be stretched to the bottom ... - Vitaly Leonov
      • Or maybe then .simple_div {max-height: 100%; height: auto; }? - Rules
      • I tried ... I don't want to - Vitaly Leonov