Tableau HTML avec 100% de hauteur, et les lignes divisent également en hauteur. Comment le rendre possible?

S'il vous plaît aller à travers ce violon pour voir ce que j'ai essayé jusqu'à présent.

<div class="outer">
    <div class="inner">
        <table style="background-color: red; width:100%; height:100%;">
            <tr style="background-color: red; width:100%; min-height:30%;">
                <td>Name</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>    
        </table>
    </div>
</div>

J'ai besoin d'afficher ce tableau occupant toute la hauteur de la div, et les lignes de ce tableau doit être égale à la hauteur à occuper l'espace de table complet.
Cela signifie, d'une table de hauteur doit être de 100% de la div de la hauteur.
et chaque ligne, la hauteur doit être de 30% de la div de la hauteur.

Aucune idée de comment faire? Aussi, je voudrais une solution qui devrait fonctionner sur la plupart des navigateurs, au moins, à partir de IE 8.

Toute aide sur ce bien apprécié.

pouvez-vous utiliser javascript/jQuery?
oui, bien sûr, mais est-ce exacte?
n'est-il pas possible par le biais de CSS lui-même?
Je ne suis pas vraiment sûr que c'est possible avec de la pure css sauf .inner ont une hauteur fixe

OriginalL'auteur Nirman | 2013-07-09

  1. 7

    Dans les styles de la inner div class, changement min-height:100% à height:100% .
    C'est tout ce dont vous avez besoin!

    (C'est parce que min-height ne peut pas être héritée)

    Voici la jsfiddle

    c'est génial, j'ai utilisé min-hauteur de rien dans mon projet... et maintenant la suppression de partout... c'est génial de travailler.

    OriginalL'auteur Nibhrit

  2. 3

    Par CSS , vous devez régler la hauteur de .intérieure . min-hauteur de la valeur ne peut pas être héritée :
    http://codepen.io/anon/pen/yuEkA
    une coupe courte serait : 

    html, body , .outer, .inner {
    height:100%;
    width:100%;
    margin:0;
}

    OriginalL'auteur G-Cyr

  3. 1

    Vous pouvez positionner la table absolue. Par exemple, donnez-le à la classe "en hauteur", et puis ajoutez le code css suivant:

    table.full-height {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

    Cela permettra d'élargir la table à la hauteur totale!

    pas de travail, en prenant tout l'écran, je veux montrer en vertu de la div seulement, comme vous pouvez le voir dans le violon, que la table est à l'intérieur de la DIV

    OriginalL'auteur Francesco Novy

  4. 1
    *{
margin:0;
padding:0;
border:0;
}
table{
height:100%;
position:absolute;
}


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td bgcolor="#FF0000">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#00FF00">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table>

    Voici un violon!

    OriginalL'auteur Lasithds

  5. -3

    jQuery solution pour 30% tr hauteur

    var t_h = $('.inner').height()

var tr_h = t_h/100*30

$('tr').height(tr_h)
$('table').height(t_h);

    jsfiddle

    OriginalL'auteur Pumpkinpro