简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Assurez-vous que le conteneur de la cellule du tableau remplit toute la hauteur du parent
P粉345302753
P粉345302753 2024-04-04 16:03:18
0
1
409

J'ai essayé d'aligner verticalement le contenu sans utiliser Flexbox, car il y avait quelques problèmes avec notre cas d'utilisation, j'ai donc essayé d'y parvenir en utilisant un tableau aligné verticalement, mais le problème est que le contenu à l'intérieur ne remplit pas la hauteur restante, c'est est-il possible de le faire via CSS. Une manière de faire cela ?

https://jsfiddle.net/s38haqm5/25/

<html>

  <body>
    <div class="row">
      <div class="cell">
        <div class="container">
          Hello world
        </div>
      </div>
      <div class="cella">
        Cell2
      </div>
    </div>

  </body>

</html>


.container {
  background-color: red;
  height: 100%; 
}

.cell {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  min-height: auto;
  max-height: none;
}

.cella {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  height: 30px;
  max-height: none;
}

.row {
  display: table
}

P粉345302753
P粉345302753

répondre à tous(1)
P粉183077097
P粉1830770972024-04-05 10:41:43 1 plancher

Vous devez définir la hauteur du parent. Désormais, votre .cell 没有设置任何高度，因此 .container n'a plus aucune valeur pour calculer 100 %. Allez simplement à la même hauteur que .cell 添加一些高度，例如 .cell {height: 30px;} （就像您在 .cella. )

Puisque .cella 和 .cell est le même, je suppose que vous voudrez peut-être ce petit conseil. Si vous souhaitez que les cellules soient identiques mais que l'une d'entre elles doit être stylée différemment, ajoutez la même classe sur toutes les cellules, puis ajoutez l'identifiant à la cellule qui doit être différente, puis stylisez l'identifiant comme vous le souhaitez. N'oubliez pas qu'une cellule avec classe et identifiant aura une valeur CSS composée de classe et d'identifiant combinés

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！