绝对定位表

Question

有没有什么方法可以将position: absolute;与也是display: table;的元素一起使用

在下面的例子中，我会想象这个表会是100%宽，(100% - 50px)高，但事实并非如此。相反，我将不得不将桌子包裹在一个绝对定位的容器中，并使其100%宽和高。它给人的感觉是愚蠢的多余。为什么绝对定位表不起作用？有什么方法可以让它工作吗？

​

html, body {
    min-height: 90%;
    min-width: 90%;
    height: 90%;
    width: 90%;
}

body {
    background-color: #333;
}

.table {
    display: table;
    border: 3px solid rebeccapurple;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
}

.cell {
    display: table-cell;
    height: 100%;
    width: 33%;
    border: 3px solid #f00;
    
}

.not-a-table {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background-color: rgba(0,200,0,.2);
}

<div class="table">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

<div class="not-a-table">&nbsp;</div>

​

Answer 1

在.table中添加宽度和高度

.table{
   ....
    width: 100%;
    height: calc(100% - 50px);
}

在未指定宽度和高度的情况下，无法将具有display:table属性的元素放置在absolute定位中...需要使用display:block属性。