Question

这是一个古老的问题，虽然我找不到适合我的解决方案。

在表格单元格（TD）中给出DIV，我想填充DIV的高度以适应TD

+-----------+
|     TD    |
|+---------+|
||   DIV   ||
|+---------+|
|           |
+-----------+

只有陷阱：

我不想设置父TD的高度
我想避免使用Javascript（更喜欢仅限CSS的解决方案）
保持可信赖的DIV的可调整大小的性质
奖励：让它在IE8 +（跨浏览器解决方案）
奖励：使用display：flex; - 我无法解决这个问题，但看起来应该可以解决这个问题。

要问太多了？

示例：

获取＆＃34; foo＆＃34; DIV，填补其父TD的100％高度。我有一些接近工作的东西，但在DIV元素上填充，抛出边框（使用Opera）。

/* My Attempt: close, but the padding throws out the borders */
div{
    display:inline-block;
    height:100%;
    width:100%;
}

http://jsfiddle.net/nickg1/g5cpQ/5/

谢谢！

Answer 1

是的，根据您的条款和条件，display:table是您的最佳解决方案。

像这样添加css：

div{
display:table;
height: 100%;
border:1px solid red;    
}

检查以下链接

LIVE DEMO

Answer 2

尝试以下方法：

table {
    height: 1px;
}
td {
    vertical-align: top;
    height: 100%;
}
div{
    border:1px solid red;
    padding: 2px 4px;
    box-sizing: border-box;
}

/* My Attempt: close, but the padding throws out the borders */
div{
    display:block;
    height: 100%;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/AkjND/

诀窍是在桌子上指定一个高度，任何小的值都可以解决问题。

如果要将垂直填充应用于内部div，则需要使用box-sizing: border-box，这可能会比IE8更早。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

使用css填充高度

2 个答案: