Question

以下简单代码段会产生一个网页占据可用的屏幕空间，顶部有一个页眉，底部有一个页脚，主要内容占用尽可能多的空间（带有虚线边框）让它更容易看到）：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-flow: column;
}

h1, small {
  flex: 0 1 auto;
}

div {
  flex: 1 1 auto;
  border: 1px dotted;
}

<!doctype html>
<html>
  <body>
    <h1>Some Header</h1>
    <div>Some Text</div>
    <small>Some Footer</small>
  </body>
</html>

如果我修改CSS和HTML而不是使用table代替div，则不会扩展表格以占用可用空间：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-flow: column;
}

h1, small {
  flex: 0 1 auto;
}

table {
  flex: 1 1 auto;
  border: 1px dotted;
}

<!doctype html>
<html>
  <body>
    <h1>Some Header</h1>
    <table><tr><td>Some Content</td></tr></table>
    <small>Some Footer</small>
  </body>
</html>

为什么第一个版本（div）有效但第二个版本（table）没有？是否有办法修复第二个示例，以便表扩展并占用所有可用空间（不引入滚动条）？

一些注意事项：我的桌子上会有一排标题（所有标题都有相同的宽度）和几行（都有相同的宽度/高度）。我知道可以使用一堆div和更多的CSS来重新创建一个表，但沿着这条路走下去感觉就像把洗澡水丢给婴儿一样（此外，我不会问这个问题，了解我是否只是围攻它）。此外，我在这里找不到JavaScript（看起来有点矫枉过正）。

我知道足够的CSS / HTML让自己陷入困境，但还不足以让自己摆脱它......

修改：aavrug建议display: flex使用table，以便表格正确扩展以填充该区域，但当我向其中添加多行/列时表他们不再是等分的。我想保留table的细胞等分布。

Answer 1

html table元素在Flex容器中保留其display属性：

display: table

因此，它不接受弹性属性。

但是，只需使用 ~~display: block~~ display: flex覆盖该规则，布局应该有效。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1,
small {
  flex: 0 1 auto;
}
table {
  display: flex;
  flex: 1 1 auto;
}
tbody {
  display: flex;
  width: 100%;
}
tr {
  display: flex;
  width: 100%;
}
td {
  flex: 1;
  border: 1px solid red;
}

<h1>Some Header</h1>
<table>
  <tr>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
  </tr>
</table>
<small>Some Footer</small>

Answer 2

我认为问题在于the table box is placed inside a table wrapper box：

该表生成一个称为表格包装盒的主要块框，其中包含表格框本身和任何标题框

因此表格框不再是弹性容器的子元素，因此不是弹性项目。 flex项是表包装器框，但是您将flex属性设置为table元素，并且

不可继承属性的值在表格框中使用而不是表格包装盒

因此，您的flex用于不是弹性项目的框，因此会被忽略。

如果在表格包装盒上使用了该属性，它可能有效，但是无法选择它。即使你可以，也不清楚它是否应根据它生成的表格布局而不是它所参与的Flexbox布局来调整大小。

解决方案很简单：

将表放在包装器中，该包装器将是弹性项目
使用弹性布局
将表格从流程中取出并相对于弹性项目给出明确的长度

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1, small {
  flex: 0 1 auto;
}
div {
  position: relative;
  flex: 1 1 0; /* Chrome needs non-auto flex-basis */
  overflow: auto;
}
table {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  border: 1px dotted;
  text-align: center;
}

＆＃13;

<h1>Some Header</h1>
<div>
  <table><tr>
    <td>This</td>
    <td>is</td>
    <td>equidistributed.</td>
  </tr><tr>
    <td>This</td>
    <td>is also</td>
    <td>equidistributed.</td>
  </tr></table>
</div>
<small>Some Footer</small>

＆＃13;

只是为了好玩，一种避免添加包装器的hacky方法是将表格样式化为一个块并将自动插入的tbody作为表格。

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1, small {
  flex: 0 1 auto;
}
table {
  display: block;
  position: relative;
  flex: 1 1 0;
}
tbody {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}
td {
  border: 1px dotted;
  text-align: center;
}

＆＃13;

<h1>Some Header</h1>
<table><tr>
  <td>This</td>
  <td>is</td>
  <td>equidistributed.</td>
</tr><tr>
  <td>This</td>
  <td>is also</td>
  <td>equidistributed.</td>
</tr></table>
<small>Some Footer</small>

＆＃13;

Answer 3

第二个示例（使用 <table> 作为弹性项目）应该像 Firefox 87 中的第一个示例 (bug 1674302) 一样正确拉伸。

Answer 4

嗯，有一件事，你应该使用vw和vh单位的高度和宽度，它们在大多数浏览器中都不受支持，但他们真的很擅长他们能做什么。此外，对于表格问题，您从未将其指定为宽度，因此您将只获得适合文本的单元格。

添加“width：75vw;”之类的内容表格风格会有所帮助（你可以使用％s作为宽度）

为什么flex-box可以使用div而不是表？

4 个答案: