Question

我在div中有一个表，表格不会填充容器div。为什么不呢？

HTML：

<div class="fill">
  <table class="table">
    ...
  </table>
</div>

CSS：

.fill {
  position:relative;
  width:100%;
  height:100%;
}

.table {
  position:absolute !important;
  left:0 !important;
  right:10px !important;
  bottom:0 !important;
  top:39px !important; 
}

该表仅填充容器div的一小部分。为什么呢？

更新：或者，如果我尝试以下操作，它在Firefox中无效，但在Chrome中无效。

HTML：

<div class="fill">
  <div class="wrap">
    <table class="table">
      ...
    </table>
  </div>
</div>

CSS：

.fill {
  position:relative;
  width:100%;
  height:100%;
}

.wrap {
  position:absolute;
  left:0;
  right:0;
  top:39px;
  bottom:0;
}

.table {
  position:relative;
  height:100%;
  width:100%;
}

第二个版本更接近我想要的（因为它可以在Chrome中运行）。

Answer 1

关于您的原始问题，这是您“为什么不”的答案：

如果未明确指定包含块的高度（即，它取决于内容高度），而这个元素不是绝对定位，值计算为'auto'。

来源：http://www.w3.org/TR/CSS2/visudet.html#the-height-property

你的'fill'div设置为100％高度，但它的父元素的高度设置为什么？如果它的父元素的高度也是一个百分比，它的父高度设置为什么，依此类推？

为更新的示例添加边框，您可以看到，'fill'的高度为0，因为它没有指定高度的父级，因此'wrap'的高度也为零。添加一个父包装器来包装整个示例，其高度为500px左右，并且在（至少）Firefox和Chrome中按预期工作。

CSS：

.fill {
  position:relative;
  width:100%;
  height:100%;
    border: 1px solid red;
}

.wrap {
  position:absolute;
  left:0;
  right:0;
  top:39px;
  bottom:0;
    border: 1px solid blue;
}

.table {
  position:relative;
  height:100%;
    border: 1px solid green;
}
.parent {
    height: 300px;
}

HTML：

<div class="parent">
<div class="fill">
  <div class="wrap">
    <table class="table">
        <tr><td>...</td></tr>
    </table>
  </div>
</div>
</div>

Answer 2

表格很特殊，它们的行为与其他块元素不同。通常情况下，表格的宽度足以容纳其内容，而不会更多。为表格设置100％的宽度应该强制它填充为其分配的空间。

Answer 3

在.table上，放宽= 100％

您可能还需要为td设置宽度。具体取决于保持布局的结构

Answer 4

表的父div的宽度和高度为100％，这与父元素无关。该表不需要是position：absolute，因此不需要有top，left，right，bottom set。

table {
    border: 1px solid blue;    
    width: 100%;
    height: 100%;
    margin: 0;
}

这是我想要的东西，减去你的顶部和右边抵消。 http://jsfiddle.net/jaredwilli/5s4DD/

您可以使用边距来设置顶部和右边，但是您不能使用100％宽度，这将无效。您可以使用display：inline-block，而不是100％宽度，而是使用javascript动态设置宽度比填充div的宽度小10px，但这是另一回事。顶部定位也是如此。你也可以做其他一些事情，但是你需要做很多事情。

此外，您可以使用表，除非页面中有多个表，否则不需要类。并从CSS中删除所有！important。它永远不必使用！重要，只是说。

为什么我的绝对定位表没有填充其容器div？

4 个答案: