简体中文(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
408

我尝试在不使用 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学习者快速成长！