以下简单的代码片段会生成一个网页,它将使用可用的屏幕空间,在顶部有一个标题,底部有一个页脚,主要内容尽可能占用空间(有虚线边框以更容易查看):
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
)不行?是否有一种方法可以修复第二个示例,使表格扩展并占用所有可用空间(而不引入滚动条)?一些说明:我的表将具有一行标题(所有标题具有相同的宽度)和几行(所有行具有相同的宽度/高度)。我知道可以使用一堆
和更多CSS重新创建表格,但走这条路感觉像是弃婴与洗脸水一起扔掉了(而且,如果我只是绕过它来解决问题,我就不会问这个问题学习了)。另外,JavaScript 在这里不可用(而且似乎过于复杂)。
我知道足够的 CSS/HTML 将自己置于麻烦之中,但不足以让自己摆脱困境...
编辑: aavrug 建议使用
我知道足够的 CSS/HTML 将自己置于麻烦之中,但不足以让自己摆脱困境...
编辑: aavrug 建议使用
display: flex
为 table
,这样表格就可以正确地扩展以填充区域,但当我向表格添加多行/列时,它们不再等分。我想保留 table
的单元格等分布。
display:table;
,只需要使用display:flex;
覆盖它即可。 - aavrugdisplay:flex
,因为<td>
元素是 flex 父元素的子元素的子元素。 - Jhecht<div>
并对其使用flex即可。 - Florian Wendelborn<div><table><tr><td>一些内容</td></tr></table></div>
) ?如果是这样,那么div会占据所有的空间但不包括内部的表格。 - Cornstalks