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

时间:2013-07-07 04:47:23

标签: css

我在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中运行)。

4 个答案:

答案 0 :(得分:2)

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

  

如果未明确指定包含块的高度   (即,它取决于内容高度),而这个元素不是   绝对定位,值计算为'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>

答案 1 :(得分:0)

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

答案 2 :(得分:0)

在.table上,放宽= 100%

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

答案 3 :(得分:0)

表的父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。 它永远不必使用!重要,只是说。