Question

我有一个对话框，它的主体分为三个部分
-正文标题
-桌子
-页脚

我体内有两个div。 Div1用于正文标题，Div2用于表格和页脚。

.div2 {
    height: 88%;
}

.table{
    overflow-y: auto;
}

当只有一个正文标题时，它可以正常工作，但是如果有多个正文标题（多行），则表和页脚会溢出我不希望的对话框正文。

我尝试了flex属性的各种组合，但无法正确完成。（由于我有限的Flex知识）。

预期：Body Title即使有多行，Table and Footer也不应溢出对话框主体并在可用空间内调整其高度。

Answer 1

这么多的CSS可以解决您的问题

table, th, td {
  border: 1px solid black;
}
.body-wrapper{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100vh;
}

根据您的要求，我认为您的html代码应该是这样的

<div class="body-wrapper">
  <div class="div1">
    <p>This is title</p>
  </div>  
  <div class="div2">
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
    <footer>
      <p>This is footer</p>
    </footer>
  </div>
</div>

动态增加和缩小表格高度

1 个答案: