我的容器中有2张桌子。其中一个将粘在容器的底部,另一个将填充父容器的剩余高度

样式:

    .page
    {
        width: 21cm;
        min-height: 29.7cm;
        padding: 0.5cm;
        margin: 1cm auto;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position: relative;
    }

<div class="page">
    <table class="table1" style="height: 100%;">
        <tr>Supposed to fill remaining space</tr>
    </table>
    <div style="position: absolute; bottom: 0;">
        <table class="table2">
             <tr>Floats to the bottom</tr>
        </table>
    </div>
</div>


我想要的是让table1占用剩余的剩余空间,但它根本不会填满所有空间。

最佳答案

您可以删除HTML表并使用显示。

DEMO

<div class="page">
  <div class="tr fullH">
    <div class="td ">
      <section>
        <p> fill avalaible space left</p>
      </section>
    </div>
  </div>
  <div class="tr">
    <div class="td">
      <section>
        <p>Floats to the bottom and expand if needed</p>
      </section>
    </div>
  </div>
</div>


和CSS

.page
{
  width: 21cm;
  height: 29.7cm;
  padding: 0.5cm;
  margin: 1cm auto;
  background: lightblue;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /*position: relative; unneeded*/
  display:table;/* height turns to be min-height , table expands */
  table-layout:fixed;/* keeps width as set, height stills expands if needed */
}
.tr {
  display:table-row;
}
.td {
  display:table-cell;
}
.fullH {
  height:100%;
}




使用display:flex;属性使其非常简单:

DEMO 2

的HTML

<div class="page">

      <section class="fullH">
        <p>Supposed to fill remaining space</p>
      </section>

      <section>
        <p>Floats to the bottom and expand if needed</p>
      </section>

</div>


和CSS

.page
{
  width: 21cm;
  height:29.7cm;
  padding: 0.5cm;
  margin: 1cm auto;
  display:flex;
  flex-direction:column
}

.fullH {
  flex:1;
}

10-05 20:37
查看更多