下面的简单片段会产生一个单独的网页,占据可用的屏幕空间,顶部有一个标题,底部是一个页脚,主要内容占用尽可能多的空间(带有虚线边框,使其更容易)查看)：
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而不是使用表来代替div,它不会扩展表以占用可用空间：
html,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)工作但第二个版本(带表格)不工作？有没有办法修复第二个例子,以便表扩展并消耗所有可用空间(不引入滚动条)？
一些注意事项：我的表将有一行标题(所有宽度相等)和几行(都具有相同的宽度/高度).我知道可以使用一堆div和更多的CSS来重新创建一个表,但沿着那条路走下来感觉就像用洗澡水把婴儿扔出去一样(此外,我不会问这个问题并且学习我是否只是被黑客攻击周围).此外,我在这里找不到JavaScript(看起来有点矫枉过正).
我知道足够的CSS / HTML让自己陷入困境,但还不足以让自己摆脱它……
编辑：aavrug建议使用display：flex for table使得表正确扩展以填充区域,但是当我向表中添加多行/列时,它们不再是等分布的.我想保留表格的细胞等分布.
解决方法
html表元素在flex容器中保留其display属性：
display: table
因此,它不接受flex属性.
但是,只需使用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>
