简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Stellen Sie sicher, dass der Container der Tabellenzelle die gesamte Höhe der übergeordneten Zelle ausfüllt
P粉345302753
P粉345302753 2024-04-04 16:03:18
0
1
406

Ich habe versucht, den Inhalt vertikal auszurichten, ohne Flexbox zu verwenden, da es bei unserem Anwendungsfall einige Probleme gab, also habe ich versucht, dies mithilfe einer vertikal ausgerichteten Tabelle zu erreichen, aber das Problem besteht darin, dass der Inhalt darin nicht die verbleibende Höhe ausfüllt Ist dies über CSS möglich? Gibt es eine Möglichkeit, dies zu tun?

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

Antworte allen(1)
P粉183077097
P粉1830770972024-04-05 10:41:43 1 Etage

您需要定义父级高度。现在您的 .cell 没有设置任何高度，因此 .container 没有任何值来计算 100%。 只需向 .cell 添加一些高度，例如 .cell {height: 30px;} （就像您在 .cella 上的高度一样。）

由于 .cella 和 .cell 相同，我假设您可能需要这一点建议。 如果您希望单元格相同，但其中一个单元格需要设置不同的样式，请在所有单元格上添加相同的类，然后将 id 添加到需要不同的单元格，然后根据您的需要设置 id 的样式想。请记住，具有 class 和 id 的单元格将具有由 class 和 id 组合而成的 css 值

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！