Question

我有一个css问题，我坚持..我无法获得我的可点击标题链接获得100％的高度;不使用javascript。

我尝试过谷歌搜索时发现的很多东西，但没有一个能解决我的问题。

我得到了这个结果：

alt text http://thomasstock.net/css100percent.jpg

这是我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>
                    <a href="#">header 1</a>
                </th>
                <th>
                    <a href="#">some very very very very very very very very very long header 2</a>
                </th>
                <th>
                    <a href="#">3</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    cell a1
                </td>
                <td>
                    cell a2
                </td>
                <td>
                    cell a3
                </td>
            </tr>
            <tr>
                <td>
                    cell b1
                </td>
                <td>
                    cell b2
                </td>
                <td>
                    cell b3
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

用这个css：

table
{
    width: 300px;
    border-collapse: collapse;
}
th, td
{
    border: solid 1px;
}

th a
{
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */
    width:100%;
    float:left;

    /* Making the headerlinks 100% height ??? */
    height: 100%; /* doesnt work! */
    min-height:100%;
}
tr
{
    height:100%;
}

download this code here

=＆GT;如何使标题完全变为粉红色＆amp;可点击？（不使用javascript？）

Answer 1

您必须将a内的th显示为block-level element：

th a {
    display: block;
}

Answer 2

您需要在标题中的链接上设置display:block。在内联元素中忽略height：width属性;

th a
{
    display:block;
    background-color: Fuchsia;

    /* Making the headerlinks 100% width */
    width:100%;

    /* Making the headerlinks 100% height ??? */
    height: 100%;
}

编辑：忘了提到100％高度工作，父母需要指定一个高度，例如

th 
{
    height: 40px;
}

Answer 3

可能不合理，但在某些情况下设置

th {
    white-space: nowrap;
}

完全摆脱这个问题。

Answer 4

您可以将每个链接的任意高度设置为相当长的时间:(可能是6em？）然后将表格单元格th上的最大高度设置为更短的值：（3em？）并隐藏溢出。这样所有链接都会比表格单元格更高但被隐藏的溢出区切掉 - 它们都应该是粉红色和可点击的。确保在display:relative;上设置th，否则IE的旧版本不会切断任何溢出。祝你好运：）

点击：设置<a> element inside the on 100% width & height</a>

4 个答案:

点击：设置<a> element inside the on 100% width &amp; height</a>

4 个答案:

点击：设置<a> element inside the on 100% width & height</a>