最近位置祖先宽度和高度不适用于 HTML Tbody

以下是位置最近的祖先的代码-

.relParent {
position: relative;
border: 5px solid red;
width: 90%;
height: 20vh;
background-color: #F5F5DC;
}
.absoluteParent {
position: absolute;
border: 5px solid blue;
width: 70%;
height: 20vh;
top: 40%;
left: 10%;
background-color: #A9A9A9;
}
.fixedParent {
position: fixed;
border: 5px solid green;
width: 50%;
height: 20vh;
top: 70%;
left: 20%;
background-color: #FFE4E1;
}
.child1 {
width: 50%;
height: 50%;
border: 2px dashed #D2691E;
margin: auto;
}
h1 {
color: #A52A2A;
}
h3 {
background-color: yellow;
}

<title>Closest Positioned Ancstor</title>
<h1>Closest Positioned Ancestor</h1>
<div class="relParent">
<h3>Relative Positioned Div</h3>
<div class="child1">Has 50% width & 50% height. The 50% is taken with respective to closest positioned ancestor's width & height</div>
</div>
<div class="absoluteParent">
<h3>Absolute Positioned Div</h3>
<div class="child1">Has 50% width & 50% height. The 50% is taken with respective to closest positioned ancestor's width & height</div>
</div>
<div class="fixedParent">
<h3>Fixed Positioned Div</h3>
<div class="child1">Has 50% width & 50% height. The 50% is taken with respective to closest positioned ancestor's width & height</div>
</div>

它运行良好。

用同样的比喻，如果我试着用table-where来做这件事表是作为相对定位元件定位的容器。和thead，tbody｛display:block｝tbody｛高度：50%；溢出：自动｝

这里的高度：50%在Chrome中有效，但在其他浏览器中不起作用。有谁能帮助它在其他浏览器上工作吗？

下面是表的代码-我这样做是因为我想要固定的表头&可滚动的表格行。

.tableWrapper {
position: relative;
margin: auto;
width: 80%;
height: 80vh;
border: 1px solid red;
}
table {
position: relative;
border-collapse: collapse;
border: 1px solid blue;
height: 100%;
table-layout: fixed;
}
thead,
tbody {
display: block;
}
td,
th {
border: 1px solid blue;
width: 70px;
height: 20px;
}
tbody {
height: 50%;
border: 4px double #7FFF00;
overflow-y: auto;
}

<h1>Table</h1>
<div class="tableWrapper">
<table>
<thead>
<tr>
<th><br>sr no</th>
<th>First Name</th>
<th>Middle Name</th>
<th>last Name</th>
<th>Address</th>
<th>Age</th>
<th><br>Sex<br></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>

让我们从"包含块"的定义开始。CSS 2.2表示

10.1"包含块"的定义

有时会计算元素框的位置和大小相对于某个矩形，称为要素元素的包含块定义如下：

根元素所在的包含块是一个称为初始包含块的矩形。对于连续介质，它具有视口的尺寸，并固定在画布上起源它是用于分页媒体的页面区域。"direction"属性初始包含块的值与根元素的值相同。

对于其他元素，如果元素的位置是"相对"或"静态"，则包含块由最近祖先盒，它是块容器或建立格式化上下文。

如果元素具有"position:fixed"，则在连续介质或页面区域(如果是分页媒体)。

如果元素具有"position:absolute"，则包含块由"position"为"绝对"，"相对"或"固定"，采用以下方式：

如果祖先是内联元素，则包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS中2.2，如果内联元素被拆分为多行，则包含块是未定义的。

否则，包含块由祖先的填充边形成。

如果没有这样的祖先，则包含块是初始包含块。

在每种情况下，最重要的是包含的元素，而不是包含的元素。在您的每个示例中，包含的元素都是position:static，这意味着上面的第2点适用。

这与您的测试是一致的，因为在每种情况下，"child1"最近的块容器祖先都是相对的、绝对的或固定的父div。

当tbody处于table-row-group的正常显示模式时，它会参与表格布局。在这种情况下，其高度由其内容行定义，而不是通过引用任何包含块或高度值来定义。这就是为什么你不能简单地让一个tbody滚动。

然而，将tbody设置为display:block意味着需要生成额外的框来保持表布局的完整性。匿名表对象是这样创建的：

<table>
{anonymous table-row box}
{anonymous table-cell box}
<tbody style="display:block">
{anonymous table box}
<tr>
<td>

请注意17.2.1匿名表对象，此匿名对象专门创建框。

生成丢失的子包装：
如果"table"或"inline table"框的子级C不是正确的表子级，则在C和所有不是正确表子级的C的连续同级之间生成一个匿名的"table row"框。
如果行组框的子C不是"表行"框，则在C和不是"表列"框的C的所有连续同级之间生成一个匿名的"表排"框。
如果"表行"框的子C不是"表单元格"，则在C和不是"表单元"框的C的所有连续同级之间生成一个匿名的"表单元格"框。
生成缺少的父级：
对于连续的内部表和"表标题"同级序列中的每个"表单元格"框C，如果C的父级不是"表行"，则在C和C的所有连续同级(即"表单元"框)周围生成一个匿名的"表列"框。
对于连续的正确表子序列中的每个正确表子C，如果C的父级不正确，则在C和C的所有连续的、属于正确表子的同级之间生成一个匿名的"表"或"内联表"框T。(如果C的父级是"内联"框，则T必须是"内联表"框；否则它必须是"表"框。)
如果"table row"的父对象既不是行组框，也不是"table"或"inline table"框，则其父对象是错误的
如果"table column"框的父对象既不是"table column-group"框，也不是"table"或"inline table"框，则该框的父级不正确
如果行组框、表列组框或表标题框的父对象既不是"表"框也不是"内联表"框，则其父对象不正确

现在可以设置tbody的高度和溢出。但包含块的规则保持不变："最近的祖先框是块容器或建立格式化上下文">

从9.4.1块格式化上下文中，我们知道表单元格是块容器和建立了一个块格式化上下文：

浮动、绝对定位的元素、块容器(例如内联块、表单元格和表标题)框，以及具有除"可见"之外的"溢出"的块框(除当该值已传播到视口时)建立新的阻止格式化其内容的上下文。

因此，作为display:block的tbody的包含块只能是匿名表单元格框。

10.5中定义了百分比高度内容高度："高度"属性，其中写道：

百分比是根据生成的长方体的包含块的高度计算的。如果没有明确指定包含块的高度。。。，并且该元素不是绝对定位的，则使用的高度是按照指定了"auto"来计算的。

因此，由于匿名表单元格没有也不能显式指定其高度，对于display:block且指定高度为百分比的tbody，其使用的高度必须是auto，因此可以从其内容中获得其实际高度。

10.1"包含块"的定义

相关内容

最新更新

热门标签：