div hauteur: 100%; ne fonctionne pas avec l'affichage: table-cellule;

Mon code fonctionnait quand

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>

Mais ne fonctionne pas quand je l'ai ajouté display:table-cell; div pour l'utilisation de vertical-align

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>

Je veux la div pour couvrir l'ensemble de l'espace blanc dans le corps

source d'informationauteur

  1. 17

    Votre code devrait fonctionner maintenant.

    <html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

    Exemple

    Règle de pouce : Toujours avoir un bon balisage chaque fois que display : table-cell.

  2. 2

    Vous devez régler la hauteur à 100% pour tous les éléments de parent alors...

    html, body {
    height: 100%
}

    Lui donner un essai, il a travaillé pour moi. Et mieux de supprimer toutes les propriétés CSS que vous définissez pour le corps-élément avant.

  3. 1

    Avoir div.table > div.table-row > tableau.table-cell avec la taille de son conteneur est un peu difficile. Un de la manière la plus simple est que vous pouvez ajouter

    .table {
    position: absolute;
}

    dans ce cas, si vous allez ajouter 

    .table {
    height: 100%;
}

    Qui s'adaptera à son parent hauteur.