Question

我正在尝试在页面中显示记录列表。我当前面临的问题是，当我向列表中添加新记录时，页面大小会增加，并且会添加滚动条。但是我不希望页面在滚动条中显示结果，相反，我希望滚动条在网格表内并将整个容器的高度固定为div的高度。

我不想固定div的高度，因为它几乎没有依赖性。我想使记录表在添加内容时不会扩展。我可以通过在页面上计算vh和其他容器并将表容器的高度设置为100％来固定高度，从而实现此目的。但是我希望它能够只计算css而无需计算。就像删除可使其生长的弹性等

该表有3个div。表头，表内容和页脚。我希望滚动条位于页眉和页脚内，而不是在添加记录时会增加页面高度的网页上

Expected Behavior

Current Behavior

我试图用溢流-y在表div上滚动，但是没有运气。尝试过的高度100％，弹性增长-0。

有人可以指出一个简单的CSS修复程序，最终可能会解决这个问题吗？

Answer 1

您可能要使用CSS网格。示例：

<style>
      .layout {
        height: 100vh;
        display: grid;
        grid-template-rows: 50px 1fr 50px;
      }
      .header {
        background: #ccc;
      }
      .content {
        overflow: auto;
      }
      .footer {
        background: #ddd;
      }
    </style>

HTML

<div class="layout">
      <div class="header">Header</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
</div>

添加记录时，防止容器的高度增加

1 个答案: