html - Opera 和 IE8 100% Height with bottom padding BUG

标签 html css height opera

我希望粉红色和蓝色框具有相同的高度 (400px),这仅在 Opera 中不起作用。高度被底部填充拖累,这对我来说就像一个错误。有人能帮忙吗?

更新 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>

最佳答案

通过应用 box-sizing: border-box 解决了这个问题。

这是类:

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

关于html - Opera 和 IE8 100% Height with bottom padding BUG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11900305/

相关文章:

javascript - jQuery .height() 属性不起作用

java - 如何在 GUI 中查看 CSS/HTML?

javascript - jquery datepicker - 将日期选择器放在文本字段下

javascript - 按住键后 Jquery/JS : skip N items from siblings. 错误

html - 如何在 twitter bootstrap 容器内设置 100% 宽度的背景?

css - 在 IE7 中如何将文本垂直对齐到固定高度容器中的底部

javascript - 如何使用循环多次将 img 插入到 div 中

javascript - 如何根据密码强度显示自定义消息

html - 在图像上跨越文本

javascript - Owl Carousel 2 - 自动高度(多项)