0

我在 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

4 回答 4

2

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

如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。

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

您的“填充”div 设置为 100% 高度，但其父元素的高度设置为多少？如果它的父元素的高度也是一个百分比，那么它的父元素的高度是多少，等等？

为更新的示例添加边框，您可以看到，“填充”的高度为 0，因为它没有指定高度的父级，因此“包装”的高度也为零。添加一个父包装器以包装整个示例，高度为 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>
于 2013-07-07T06:10:42.373 回答
0

表格很特殊，它们的行为与其他块元素不同。通常，表格的宽度刚好可以容纳其内容，仅此而已。为表格设置 100% 的宽度应该会强制它填充分配给它的空间。

于 2013-07-07T04:52:56.653 回答
0

在 .table 上，放置 width=100%

您可能还必须为 td 设置宽度。取决于保持布局结构化

于 2013-07-07T04:55:14.943 回答
0

表格的父 div 的宽度和高度为 100%，无论父元素是什么。表格不需要是 position: absolute，因此不需要设置 top、left、right、bottom。

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。从来没有必要使用！important，只是说。

于 2013-07-07T05:00:23.140 回答