Question

我有这张桌子：

<table>
    <tr>
        <td>
            <div style="height: 100%">Some Content</div>
        </td>
        <td>
             Some Content<br><br><br><br>
        </td>
    </tr>
</table>

<div>高度100%位于<td>内，但未指定<td>的高度。应该有一些简单的解决方案。

Answer 1

JS FIDDLE EXAMPLE

您可以使用：

<td style="vertical-align:top;">Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:bottom;">Bottom</td>
<td style="vertical-align:54%;">Custom</td>
// More information on: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

在表格单元格上正确定位内容。然而，您仍然会遇到背景着色问题，您可能希望将任何颜色直接应用于表格单元格，如下所示：

<td style="background-color:yellow;"></td>

表格行高的信息：

用户计算“table-row”元素框的高度 agent有行中的所有单元格可用：它是最大的单元格 row的计算'height'，计算出的每个单元格的'height' 行，以及单元格所需的最小高度（MIN）。 '身高' 'table-row'的'auto'值表示用于布局的行高是MIN。 MIN取决于细胞盒高度和细胞盒对齐（很多比如计算一个线框高度）。 CSS 2.1没有定义如何计算表格单元格和表格行的高度使用百分比值指定高度。 CSS 2.1没有定义行组上'height'的含义。 Source W3.org

我已经完成了内联css，记得总是使用样式表分隔css。

似乎div高度仅限于单元格的高度，我们可以以像素为单位操纵单元格高度。 100％只会给你100％的单元格最小高度，所以你必须以像素或某种形式的尺寸来定义它。

表td内的100％高度div

1 个答案: