简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
確保表格單元格的容器填入父級的整個高度
P粉345302753
P粉345302753 2024-04-04 16:03:18
0
1
410

我嘗試在不使用Flexbox 的情況下垂直對齊內容，因為我們的用例存在一些問題，所以我嘗試使用垂直對齊的表格來實現，但問題是裡面的內容沒有填充剩餘的高度，是否可以通過CSS以某種方式做到這一點？

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

全部回覆(1)
P粉183077097
P粉1830770972024-04-05 10:41:43 1樓

您需要定義父級高度。現在您的 .cell 沒有設定任何高度，因此 .container 沒有任何值來計算 100%。 只需在.cell 中添加一些高度，例如.cell {height: 30px;} （就像您在.cella 上的高度一樣。）

由於 .cella 和 .cell 相同，我假設您可能需要這一點建議。 如果您希望單元格相同，但其中一個單元格需要設定不同的樣式，請在所有單元格上添加相同的類，然後將id 添加到需要不同的單元格，然後根據您的需要設置id 的樣式想。請記住，具有 class 和 id 的單元格將具有由 class 和 id 組合而成的 css 值

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！