Making container in table-cell fill the whole height of its parent-CodePudding

I am trying to vertically align content without using flexbox because there were some problems with our use case, so I am trying to do it with table which works fine as vertically aligning goes but the problem is that the content inside doesn't fill the remaining height, is there possible to do that through CSS somehow ?

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

<html>

  <body>
    <div >
      <div >
        <div >
          Hello world
        </div>
      </div>
      <div >
        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
}

CodePudding user response：

You need to define parent height. Now your .cell does not have any hight set, so .container doesnt have any value to calculate the 100% from. Simply add some height to .cell, for example .cell {height: 30px;} (just like you have on .cella.)

Since .cella and .cell are same, Im assuming you might need this bit of an advice. If you want your cells to be the same with the fact that one of them needs to be styled differently, add the same class on all of them, and then add id to the one that needs to be different and then style the id as you want. Keep in mind that the cell with class and id will have css values combined from both class and id

CodePudding user response：

This worked for me just fine. Give it a try and tell me if it fulfills your wishes.

<html>
  <body>
    <div >
      <div  id="cell1">
        <div >
          Hello world
        </div>
      </div>
      <div  id="cell2">
        Cell2
      </div>
    </div>
  </body>
</html>

<style>
.container {
  background-color: red;
  position: absolute;
  inset: 0; /*shorthand for top:0, left:0, bottom:0, right:0*/
  height: 100%;
  width: 100%;

  /* for centering content within container
  display:flex;
  justify-content:center;
  align-items:center;
 */
}

.cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  border: 1px solid black;
  height: min-content;
  width: 100px;
}

.row {
  display: table
}
</style>

What I have done is that I have set your .container to position absolute and parent .cell to relative, so it becomes a containing block of the .container, inset:0 makes the absolute .container strech over the whole relative .cell. parent. Hope this does the job!