Question

我正在使用表格设计网页，布局如下所示：

<html>
  <head>
    </head>
  <body>
    <table>
      <tr><td></td></tr>
      <tr><td></td></tr>
      <tr><td></td></tr>
      </table>
    </body>
  </html>

我需要我的桌子最小高度以匹配屏幕高度，即当内容高度小于屏幕高度时，它应该通过在中间行添加空间来匹配屏幕高度。

实现这一目标的最简单方法是什么？

Answer 1

不要使用<table>元素进行布局。事实上，CSS3 flexbox规范是为像你这样的布局要求创建的 - 诀窍是在父元素上使用display flex，并确保使用flex-grow: 1允许填充最小高度的行增长。父母的最低身高应为100vh。

body {
  padding: 0;
  margin: 0;
}
div.content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
div.row-2 {
  background-color: #333;
  color: #eee;
  flex-grow: 1;
}

<div class="content-wrapper">
  <div class="row-1">Row 1</div>
  <div class="row-2">Row 2</div>
  <div class="row-3">Row 3</div>
</div>

Answer 2

这是一种做法。您可以为第一行和最后一行中的表格单元格指定高度，然后中间行将填充剩余空间。

您需要为表格指定高度，100vh。这比使用100％更好（这需要设置身体和html元素的高度，这并不总是适用于所有浏览器。）

请注意，为表指定高度时，高度值将被视为最小值。浏览器会根据需要扩展表格的高度，以确保显示所有内容。

在下面的示例中，您可以在较小的显示窗口上看到滚动效果。如果您以完整页面模式查看演示，则内容的位置没有垂直滚动条。

html, body {
  margin: 0;
}
table {
  width: 100%;
  height: 100vh;
  border: 1px dotted blue;
}
td {
  border: 1px dotted blue;
}
.r1 td, .r3 td {
  height: 50px;
}
.r2 td {
  vertical-align: top;
}

<table>
  <tr class="r1">
    <td>Header</td>
  </tr>
  <tr class="r2">
    <td>Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus sapien erat, ac hendrerit quam euismod vitae. Morbi sed dolor in quam consequat hendrerit condimentum fringilla arcu. Nulla mollis, neque non tincidunt auctor, libero ex viverra felis, a tempor purus leo eget justo. Aenean mattis est tincidunt ante tincidunt, quis aliquam neque bibendum. Sed id mauris non ligula malesuada porta in nec velit. Aliquam a erat elementum, dapibus dui sed, pulvinar mauris. Duis egestas luctus turpis non feugiat. Mauris sit amet ornare quam. Nunc rutrum orci lacus, vel commodo arcu convallis sed. Donec et urna tellus. Integer pulvinar ante at urna molestie, sit amet euismod turpis venenatis. Etiam congue quis mi in pretium. Aenean commodo ante et odio ultricies, sed sodales nisi tincidunt. Sed convallis tincidunt aliquam. Duis congue magna id congue tincidunt.</td>
  </tr>
  <tr class="r3">
    <td>Footer</td>
  </tr>
</table>

HTML - 使表格最小高度与当前屏幕高度相匹配

2 个答案: