Question

我有3列

.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>

我想将最后一列分为3层，已知顶部和底部div的高度。因此，我希望中间的div填满它们之间的空间。

实际发生的情况是，此页脚div显示在myParent外部，就好像它没有任何关系。我在做什么错了？

Answer 1

我对你的身高采取了一些自由措施，以便表现得更好。

对所有内容都使用CSS，而不要放在标记中。为此使用类。

我假设您希望文本位于底部的最后一个文本中，因此我在其周围添加了span，并在行align-self: flex-end;的末尾使用了flex。添加了背景色以使解决方案更加清晰。

#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>

Answer 2

如果使用bottom属性，则还需要指定position。我用calc来填充空白。这样，中间行的高度将取决于屏幕尺寸。

.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>

页脚div无法正确显示

2 个答案: