html - 为什么我的不显示: table-cell element fill available space?

Question

更新 - 我决定不使用 JavaScript 解决方案。确保它始终有效的唯一方法是将其放入每隔几秒运行一次的 setInterval() 中。不想那样做。我知道这个 CSS 是可行的，我已经看到它起作用了。如果它结束，我将重新打开赏金，大约 150。

---

我有一个由两部分组成的模态弹出窗口:左侧和右侧。在这两个部分中，上方是标签，下方是内容。标签固定在一定数量的像素，但底部区域需要能够填充剩余空间，所以我在左右两侧使用display:table和 display: table-cell 在内节上实现“填充剩余空间”的效果。它在 Chrome 和 Safari 中运行良好。

这是 CSS:

#tagBoxLeft,#tagBoxRight {
    display: table;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
    display: table-row;
    -webkit-border-top-left-radius: 20px;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-box-shadow: 0 1px 0 #FFF;
    -moz-box-shadow: 0 1px 0 #FFF;
    box-shadow: 0 1px 0 #FFF;
}
.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: table-cell;
}
#taglabel {
    display: table-row;
    z-index: 10000;
    border-top: 1px solid #FFF;
    width: 100%;
    height: 39px;
}

它只是把一堆 div 放到一个表格中，这样它们就可以有相对于彼此的高度。另请注意，左侧和右侧是相对于浏览器窗口的，因此我不能只使用百分比。

但是，在 Firefox 和 Opera 中，#tagBoxLeft 和 #tagBoxRight 侧部分拒绝接受 height:100%; 而它们有显示:表格；。所以它不会强制底部部分响应。我知道 Firefox 和 Opera 通常支持它(参见 http://jsfiddle.net/Qxswa/)。但为什么我的所有内容在 Firefox 和 Opera 中都会溢出？

这是问题的屏幕截图:

Answer 1

为什么不能简单地使用 JavaScript 来计算正确的高度并将其内联应用？它不是那么好和简单，但对于您所描述的内容来说是微不足道的。

var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');

var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');