在开发后台管理系统,我们都需要跟 table 来展示列表数据,通常会遇到一个问题,table 的 td 内 div 高度无法填满 td 高度。即使将 div 的高度设置为 height:100%,div 并不能如预期那样完全填满 td 的高度。那么如何解决这个问题呢?经过测试,在 Chrome 和 Firefox 浏览器中,解决方案是不同的。
假如有如下 table 布局
<style>
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid #555;
}
.inner-div {
height: 100%;
background-color: cornflowerblue;
}
</style>
<table>
<tr>
<td>
<p>1</p>
<p>2</p>
<p>3</p>
</td>
<td>
<div class="inner-div">填满高度</div>
</td>
</tr>
</table>
这时候无论在 Chrome 还是 Firefox 浏览器中,div 都无法填满 td 的高度。
Chrome 浏览器
在 Chrome 浏览器中,只需要将 td 的高度设置为 height: 1px;
即可,例如下面代码
table tr td {
border: 1px solid #555;
height: 1px;
}
Firefox 浏览器
然而上述方法在 Firefox 浏览器中并不起作用,我们需要针对 Firefox 浏览器做特殊处理,这里需要用到 @-moz-document url-prefix()
选择器,设置 td 的高度为 100%,并且内部的 div 需要设置 diplay
为 inner-table
或 table
@-moz-document url-prefix() {
table tr td {
height: 100%;
}
.inner-div {
diplay: inline-table;
height: 100%;
}
}