Question

我的设置如下：

<html><head><style>
table{
    height:100%;
    width:100%;
    padding:0 20px 20px 20px;
    min-height:540px;
    min-width:720px;
}
tr.head{
    height:35px;
    background:black;
}
td.left-bar{
    background-color:green;
    width:220px;
}
td.spacer{
    width:10px;
}
td.right-bar{
    background-color:blue;
}
div.sb-top{
    height:20px;
    background-color:red;
}
div.sb-bottom{
    height:100%;
    background-color:yellow;
    padding:10px;
}
</style></head><body>
<table>
    <tr class="head"><td colspan='3'></tr>
    <tr>
        <td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
        <td class="spacer"></td><td class="right-bar"></td>
    </tr>
</table>
</body></html>

然而，当我这样做时，sb_bottom上的高度和填充都会导致它溢出单元格。我不太关心右/左溢出，但我绝对必须修复底部溢出。我怎样才能做到这一点？谢谢！

Answer 1

如何将填充物移动到身体而不是桌子上？

如果这不起作用，您可以将表放在div中，并为div赋予适当的边距而不是填充。

Answer 2

摆脱你的身高和宽度100％的要求......它会自行传播。另外，你的最小高度和宽度可能在这里起作用因素......你也可以摆脱那些

Answer 3

这可能只是一个黑客，但我在左栏添加了填充底部，看起来没问题。

td.left-bar{
    background-color:green;
    width:220px;
    padding-bottom:40px;
}

我用文本加载了sb-bottom div并且它在屏幕上滚动，但我不确定你是想要修复高度还是可以滚动。

Answer 4

box-sizing: border-box;上所需要的只是div.sb-bottom。

这将确保高度：100％包括填充以及父内容高度。否则，实际高度或div将是父+填充的高度，它将始终超出父内容高度。

100％高度和填充=溢出

4 个答案: