hauteur: 100% pour les <div> dans un <div> avec display: table-cell

Voici 2 colonne de balisage à l'aide de display: table et display: table-cell déclarations CSS:

CSS:

.table {
  display: table;
}

.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
}

.container {
  height: 100%;
  border: 2px solid green;
}

HTML:

<div class="table">
  <div class="cell">
    <p>Text
      <p>Text
        <p>Text
          <p>Text
            <p>Text
              <p>Text
                <p>Text
                  <p>Text
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

Mais .container bloc ne doit pas remplir de cellule-mère à la verticale. Voici un exemple sur JsFiddle: http://jsfiddle.net/MGRdP/2.

Ce que j'ai | Ce dont j'ai besoin

hauteur: 100% pour les <div> dans un <div> avec display: table-cell

S'il vous plaît, ne propose pas de JS solution.

Le problème est que vous utilisez height: 100%; pour élément enfant dont le parent height est fixé à auto, donc afin de remédier à ce problème, affectez height: 100%; à tous les parents, et si non, que l'utilisation de certains fixe height pour .cell
+1 pour pas de JS solution.

InformationsquelleAutor Paul Annekov | 2014-03-06

48

Lorsque vous utilisez % pour le réglage des hauteurs ou largeurs de toujours définir les largeurs/hauteurs de parent éléments:

CSS:
```
.table {
    display: table;
    height: 100%;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height: 100%;
}

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}
```
HTML:
```
<div class="table">
  <div class="cell">
    <p>Text
      <p>Text
        <p>Text
          <p>Text
            <p>Text
              <p>Text
                <p>Text
                  <p>Text
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>
```
- Vous devez ajouter -moz-box-sizing: border-box; à la .container à le faire aussi fonctionner correctement sur FF.
- Oui, vous avez raison. le .container div, c'était d'avoir une hauteur de plus de 100%. Corrigé et mis à jour le jsfiddle dans ma réponse
- Changement de la hauteur de la table de 1px, et il fonctionne pour IE11. Rien en dessous de cela.
- Pourquoi n'est-ce pas le travail en <IE11 - c'est ridicule. Il fonctionne sur tous les navigateur, mobile et autres - mais IE .. je ne peux pas le supporter. GAH
- toutes les suggestions pour IE9, 10?
- Pas du haut de ma tête, j'ai peur.
- Juste attendre quelques semaines de plus et vous n'aurez pas à vous soucier de IE10 et au-dessous de plus 🙂 microsoft.com/en-us/WindowsForBusiness/End-of-IE-support
- Microsoft enlever le support est donc pas égale aux gens d'arrêter de l'utiliser.
- non, mais au moins, vous pouvez justifier pourquoi ils obtenir une version dégradée de votre site web
- Pour ajouter à ce que James Sud a souligné, ajoutant height: 100%; min-height: 1px; à la display: table classe d'aider IE 11.
- Rien de travail dans IE. Rien.
- Il ne fonctionne plus en Chrome 63...
- intéressant. il travaille dans FF 57. besoin de faire un peu plus de creuser
- Cette solution a cessé de travailler sur Chrome malheureusement
- Ces réponses courtes a un énorme pouvoir, de temps en temps. En effet, il fonctionne, au moins sur Firefox. Tks 🙂
InformationsquelleAutor anurupr
26

ensemble height: 100%; et overflow:auto; pour les div à l'intérieur de .cell
- overflow:auto; a été la clé pour moi. Merci!
- Mais que dire de la barre de défilement qui s'affiche avec overflow: auto ?
InformationsquelleAutor hd.deman
25
```
table{
   height:1px;
}

table > td{
   height:100%;
}

table > td > .inner{
   height:100%;
}
```
Confirmé travailler sur:
- Chrome 60.0.3112.113, 63.0.3239.84
- Firefox 55.0.3, 57.0.1
- Internet Explorer 11
- table { height:1px; } est la clé
- Ce qu'en réalité on a bien travaillé avec la nouvelle version de Chrome, après la solution retenue a cessé de travailler pour elle.
- ridicule, mais parfait. Merci! En fait je n'ai même pas besoin de la td { 100% }, juste le table et .inner styles a fonctionné pour moi.
InformationsquelleAutor Danila Alpatov
15

En Plus de jsFiddle, je peux offrir un vilain hack si vous le souhaitez afin de faire de la cross-browser (IE11, Chrome, Firefox).

Au lieu de height:100%;, mettre height:1em; sur le .cell.
- Pouvez-vous expliquer pourquoi en changeant la hauteur: de 100% à hauteur de: cadratin (1 em; œuvres? Cadratin (1 em devrait juste être à la hauteur de la lettre "m" .... Drôle, j'ai un problème similaire, comme ci-dessus et l'évolution de la hauteur:cadratin (1 em fixé mon problème à travers le conseil d'administration. Bravo! REMARQUE* je n'ai rien d'autre comme le changement de position, etc...
- Je ne suis pas sûr si son moche, mais ça fonctionne. Tiens je savais pourquoi.
InformationsquelleAutor Saar

C'est exactement ce que vous voulez:

HTML

<div class="table">

    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS

.table {
    display: table;
    height:auto;
}

.cell {
    border: 2px solid black; 
    display:table-cell;
    vertical-align:top;
}

.container {
    height: 100%;
    overflow:auto;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

-moz-box-sizing: border-box; pour .container est là pour ça 🙂
Fonctionne dans FF mais pas sous IE (11)

InformationsquelleAutor Ernest Sawyer

7

Faire le tableau de la cellule de position relative, et ensuite faire l'intérieur de la div en position absolute, avec haut/droite/bas/gauche tous ensemble à 0px.
```
.table-cell {
  display: table-cell;
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
```
- Que faire si votre .inner-div marges, ou il peut avoir débordant de contenu?
InformationsquelleAutor Abdalla Mahmoud

Définir votre .table et .cell height:100%;

    .table {
        display: table;
        height:100%;
    }

    .cell {
        border: 1px solid black;
        display: table-cell;
        vertical-align:top;
height: 100%;

    }

    .container {
        height: 100%;
        border: 10px solid green;

    }

Démo

Aucune de ces solutions travaillé sur Bootstrap éléments: l'élément de tableau est une matière première, un élément de cellule est un col-lg et le conteneur est un panneau

InformationsquelleAutor Rohit Azad

Vous devez vous connecter pour publier un commentaire.