css – 如何完全填充它的父？

这里是相关的代码(不工作)：

<html>
<head>
<title>testing td checkBoxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
  <tr>
    <td>Some column title</td>
    <td>Another column title</td>
  </tr>
  <tr>
    <td>Value 1<br>(a bit more info)</td>
    <td><label><input type="checkBox" /> &nbsp;</label></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td><input type="checkBox" /></td>
  </tr>
</table>
</body>
</html>

原因是，我想在表单元格中的任何位置单击以选中/取消选中该复选框。

编辑：
顺便说一下，没有JavaScript解决方案请，无障碍的原因。
我试过使用display：block;但只适用于宽度，而不适用于高度

解决方法

我只在IE 6,7,8和FF 3.6.3中测试了这个。

<html>
<head>
<title>testing td checkBoxes</title>
<style type="text/css">
tr {
    height: 1px;
}
td {
    border: 1px solid #000;
    height: 100%;
}
label { 
    display: block; 
    border: 1px solid #f00;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}
</style>
</head>
<body>
<table>
    <tr>
        <td>Some column title</td>
        <td>Another column title</td>
    </tr>
    <tr>
        <td>Value 1<br>(a bit more info)</td>
        <td><label><input type="checkBox" /> &nbsp;</label></td>
    </tr>
</table>
</body>
</html>

这里的主要技巧是定义行的高度，这样我们可以在他们的孩子(单元格)上使用100％的高度，然后在单元格的子节点(标签)上使用100％的高度。这样，无论单元格中有多少内容，它将强制扩展其父行，并且其同级单元格将跟随。由于标签具有其父级的100％高度，其高度已定义，因此也将垂直扩展。

第二个和最后一个技巧(但同样重要)是使用CSS hack的min-height属性，如注释中所解释。

希望这可以帮助！

原文链接：https://www.f2er.com/css/220898.html

css – 如何完全填充它的父？

解决方法

猜你在找的CSS相关文章