Opera和IE8 100％高度，底部填充錯誤

Question

我希望粉紅色和藍色框具有相同的高度（400px），這僅在Opera中不起作用。 底部填充物使高度增加，這對我來說似乎是個bug。 有人可以幫忙嗎？

更新1-只是在IE8中進行了檢查，它也不起作用，因此該問題已重新擴展到IE + Opera。

更新2 -padding-bottom更改為50px，使問題更清晰。 我正在使用的Opera版本是11.62。

HTML（觀看粉色和藍色方框的高度）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: wheat;">
                    <div style="display: table-cell; background-color: Green; padding-bottom: 50px; height: 100%;">
                        <div style="height: 100%; background-color: pink;">Inner</div>
                    </div>
                </div>
            </td>
            <td valign="top">
                <div style="display: table; width: 400px; height: 100px; background-color: blue;">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

通過應用box-sizing: border-box 。

這是課程：

.bb
{
     box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}

Opera和IE8 100％高度，底部填充錯誤

問題描述

1 個解決方案

解決方案1
0 已采納 2012-08-13 13:02:25

Opera和IE8 100％高度，底部填充錯誤

問題描述

1 個解決方案

解決方案1 0 已采納 2012-08-13 13:02:25

解決方案1
0 已采納 2012-08-13 13:02:25