Footer div not displaying properly

Question

I have 3 columns

.bookingTotals.middleRow {
  height: 315px;
  bottom: 400px;
}

.bookingTotals.row {
  height: 400px;
  bottom: 0;
  margin-left: 920px;
  /*margin-right: 55px;*/
}

<div id "myParent">
  <div style="float: left; width: 400px;">
    //some stuff
    <div>
      <div style="float: left; width: 400px;">
        //some stuff
        <div>
          <div style="float: left; width: 400px;">
            <div style="height:50px;">
              //top stuff
            </div>
            <div class="bookingTotals middleRow">
              //middle stiff that fills the gap
            </div>
            <div class="bookingTotals row">
              //bottom stuff that i want fixed to the bottom
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I want to split the last column into 3 layers where the top and bottom div heights are known. So I want the middle div to fill the space between.

What actually happens is that this footer div is displayed outside myParent as if it had no relation to it. What am I doing wrong?

Answer 1

If you use the bottom property you also need to specify position. I used calc to fill the space. In this way, the height of the middle row will depend on the screen size.

.top-row {
  height: 50px;
  background: red;
}

.bookingTotals.middleRow {
  height: calc(100vh - 400px);
  background: orange;
}

.bookingTotals.row {
  height: 290px;
  background: yellow;
}

<div id="myParent">
  <div>
    some stuff
    <div>
      <div style="width: 400px;">
        some stuff
        <div>
          <div style="width: 400px;">
            <div class="top-row">
              top stuff
            </div>
            <div class="bookingTotals middleRow">
              middle stiff that fills the gap
            </div>
            <div class="bookingTotals row">
              bottom stuff that i want fixed to the bottom
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

I took some liberty with your height so it would show better.

Use CSS for everything, not put in the markup. Use classes for that.

I make the assumption you want the text in the last one at the bottom so I added a span around it and used align-self: flex-end; at the flex end for the row. Background color added for clarity of the solution.

#myParent {
  width: 100px;
}

.rowthing {
  width: 410px;
}

.holder {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  border: solid 1px red;
}

.things {
  display: flex;
}

.topstuff {
  height: 50px;
  background-color: #ddeeee;
}

.bookingTotals.middleRow {
  flex-grow: 1;
  background-color: #dddddd;
  justify-content: space-evenly;
}

.bookingTotals.middleRow span {
  align-self: center;
}

.bookingTotals.bottom {
  height: 100px;
  background-color: #eeeedd;
  justify-content: center;
}

.bookingTotals.bottom span {
  align-self: flex-end;
}

<div id "myParent">
  <div class="rowthing">
    //some stuff1
  </div>
  <div class="rowthing">
    //some stuff2
  </div>
  <div class="rowthing holder">
    <div class="things topstuff">
      //top stuff
    </div>
    <div class="things bookingTotals middleRow">
      <span> //middle stiff that fills the gap<span>
    </div>
    <div class="things bookingTotals bottom">
      <span>bottom stuff that i want fixed to the bottom<span>
    </div>
  </div>
</div>