简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Make sure the table cell's container fills the entire height of the parent
P粉345302753
P粉345302753 2024-04-04 16:03:18
0
1
404

I tried to vertically align the content without using Flexbox, because there were some problems with our use case, so I tried to achieve it with a vertically aligned table, but the problem is that the content inside is not filling the remaining height, is it possible to pass CSS does this somehow?

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

reply all(1)
P粉183077097
P粉1830770972024-04-05 10:41:43 1 floor

You need to define the parent height. Now your .cell doesn't have any height set, so .container doesn't have any value to calculate 100% from. Just add some height to .cell, like .cell {height: 30px;} (Just like you did on .cella.)

Since .cella and .cell are the same, I'm assuming you might want this bit of advice. If you want the cells to be the same but one of them needs to be styled differently, add the same class on all cells and then add the id to the cell that needs to be different and then style the id as you want . Remember that a cell with class and id will have a css value that is the combination of class and id

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！