我希望粉红色和蓝色框具有相同的高度 (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/