Question

我有这样的HTML结构：

<div class="wrapper">
<table>
<tbody>
<tr>
<td>some content</td>
</tr>
</tbody>
</table>
</div>

我的包装风格是这样的：

.wrapper{
color: #444444;
    height: 165px;
    line-height: 135%;
    margin-top: 10px;
    padding-bottom: 10px;
    width: 270px;
}

我的表只定义了宽度以及一些继承的样式：

.wrapper> table {
    width: 100%;
}
table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

我想要做的是我的表消耗了父元素的最大高度.wrapper，其高度值为165px但是由于某种原因，表格高度没有减少。

我的最终目标是在包装器上设置一个y-overflow，这样如果表格变大了.wrapper用户可以滚动的内容，我在这里缺少什么提示？

当我将表高度更改为＆gt;然后190px，表反应它变大，但如果我改为较小的尺寸，即165px或任何低于190px，它似乎没有响应

Answer 1

如果您希望100%为高，请将其height: 100%。目前，您根本没有指定高度。

请记住，表格往往不遵守所有高度规则。如果内容不合适，他们可能会有点顽固。 ;）

Answer 2

将Addig height: 100%添加到表格样式确实使它从父元素继承高度：

.wrapper> table {
  width: 100%;
  height: 100%;
}

演示：http://jsfiddle.net/WDFa2/

注意：表继承的高度是父级的特定高度，即165px，而不是包括填充的高度，即175px。

表高度属性似乎没有任何影响

2 个答案: