Cette question est peut-être simple, mais je ne trouve pas de réponse.

J'ai le html suivant:

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

Et css:

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

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

Comment puis-je étirer le tableau verticalement sans modifier la propriété height de div? Je veux que le table ait height: 100% mais cela ne fonctionne pas car les conteneurs extérieurs n'ont pas une hauteur fixe (si je comprends bien).

http://jsfiddle.net/8qedxug9/

0
Serg046 16 nov. 2017 à 11:31

4 réponses

Meilleure réponse

Donnez height: 100% à l'élément div. Si vous ne souhaitez pas faire défiler, ajoutez overflow:hidden;.

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

div{
  height: 100%;
  overflow:hidden;
}

table {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background: red;
}
<div>
  some text
  <div>
    <table>
        <tr>
          <td>
            Test
          </td>
        </tr>
    </table>
  </div>
</div>
1
Hassan Imam 16 nov. 2017 à 08:40

Afin de déclarer le height d'un élément relativement (dans %), vous devrez déclarer le height de son élément parent. Donc, vous devrez déclarer les height de votre divs:

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

CSS:

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

div {
  height: 100%;
}

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}
0
barbarossa 16 nov. 2017 à 08:59

Pour changer la propriété de hauteur afin d'avoir toujours 100% de la hauteur de la fenêtre, vous devez utiliser l'unité CSS view height comme ceci:

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

table {
    height: 95vh;
    margin: 0 auto;
    background: red;
    width: 100%;
}
<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>
0
Zvezdas1989 16 nov. 2017 à 08:41

Si la largeur et la hauteur par défaut d'un élément HTML sont relatives à son parent. Donc, dans ce cas, la table fait 100% de la hauteur de son élément Div parent. La division dans laquelle se trouve la table devra donc également avoir une hauteur de 100%.

Dans votre Fiddle, ajouter une hauteur de 100% à tous les divs fait que le div s'étire à 100% de la hauteur du corps, et donc la table s'étire également à 100% de la hauteur:

body,html {
    height: 100%;
    width: 100%;
    margin: 0;
}
div {
    height: 100%;
}

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

td {
    vertical-align: top;
}
0
Cactusman07 16 nov. 2017 à 08:50
47324915