我在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中运行)。
答案 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。 它永远不必使用!重要,只是说。