Question

我的容器中有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占用剩下的剩余空间，但它根本没有填满空间。

Answer 1

您可以删除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;
}

Answer 2

是的，它直接需要父级的高度，你的代码看起来会在第一次看起来有效，但它不适用于表格。首先，您要将内容添加到 tr ，直接将其添加到 td ，以使表格调整单元格的高度。

这是一个解决方法代码，可以正常工作：

.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">
    <div style="height:100%;">
    <table class="table1"  style="height:100%;">
        <tr><td>Supposed to fill remaining space</td></tr>
    </table>
   </div>
    <div style="position: absolute; bottom: 0;">
        <table class="table2">
             <tr><td>Floats to the bottom</td></tr>
        </table>
    </div>
</div>

这不是创建布局的正确方法，也不是添加样式的正确方法。内联样式绝不是一个好习惯

Html表格高度=＆＃34; 100％＆＃34;不填充父母身高

2 个答案: