更新 - 我决定不使用 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 中都会溢出?
这是问题的屏幕截图:
最佳答案
为什么不能简单地使用 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');
关于html - 为什么我的不显示: table-cell element fill available space?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10241143/