最近定位祖先宽度&高度不适用于 HTML Tbody [英] Closest Positioned Ancestor width & height doesn't work on HTML Tbody

查看：30 发布时间：2021/9/23 20:41:37 html css

本文介绍了最近定位祖先宽度&高度不适用于 HTML Tbody的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.relParent {位置:相对；边框:5px纯红色；宽度:90%；高度:20vh；背景色:#F5F5DC；}.absoluteParent {位置:绝对；边框:5px纯蓝色；宽度:70%；高度:20vh；顶部:40%；左:10%；背景色:#A9A9A9；}.fixedParent {位置:固定；边框:5px纯绿色；宽度:50%；高度:20vh；顶部:70%；左:20%；背景颜色:#FFE4E1；}.child1 {宽度:50%；高度:50%；边框:2px 虚线 #D2691E;保证金:自动；}h1{颜色:#A52A2A；}h3{背景颜色:黄色；}

最近定位的Ancstor<h1>最近定位的祖先</h1><div class="relParent"><h3>相对定位的Div</h3><div class="child1">有 50% 的宽度 &50% 的高度.50% 分别取最接近定位祖先的宽度和宽度.高度

<div class="absoluteParent"><h3>绝对定位Div</h3><div class="child1">有 50% 的宽度 &50% 的高度.50% 分别取最接近定位祖先的宽度和宽度.高度

<div class="fixedParent"><h3>固定定位Div</h3><div class="child1">有 50% 的宽度 &50% 的高度.50% 分别取最接近定位祖先的宽度和宽度.高度

.tableWrapper {位置:相对；保证金:自动；宽度:80%；高度:80vh；边框:1px纯红色；}桌子 {位置:相对；边框折叠:折叠；边框:1px纯蓝色；高度:100%；表格布局:固定；}头，身体{显示:块；}天，第 {边框:1px纯蓝色；宽度:70px；高度:20px；}身体{高度:50%；边框:4px 双#7FFF00；溢出-y:自动；}

Table <div class="tableWrapper"><表格><头><tr><th><br>sr no</th><th>名字</th><th>中间名</th><th>姓氏</th><th>地址</th><th>年龄</th><th><br>性<br></th></tr></thead><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>

10.1 包含块"的定义

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

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

对于其他元素，如果元素的位置是'relative'或'static'，则包含块由元素的内容边缘组成最近的祖先盒子是一个块容器或建立一个格式化上下文.

如果元素有'position:fixed'，则在连续媒体或连续媒体的情况下，包含块由视口建立分页媒体的页面区域.

如果元素有'position: absolute'，则包含块由最近的祖先建立，'position'为'绝对'，'relative' 或 'fixed'，方式如下:
如果祖先是内联元素，则包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框.在 CSS 中2.2、如果行内元素被分割成多行，则包含块未定义.
否则，包含块由祖先的填充边缘形成.

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

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

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

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

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

{匿名表行框}{匿名表格单元格框}<tbody style="display:block">{匿名表框}<tr><td>来自 17.2.1 匿名表对象的注意事项这个匿名对象专门创建盒子. <块引用> 生成缺失的子包装器: 如果表"或内联表"框的子 C 不是正确的表子，则围绕 C 和 C 的所有连续兄弟(不是正确的表子)生成一个匿名的表行"框. 如果行组框的子 C 不是table-row"框，则围绕 C 和 C 的所有连续兄弟(不是table-row"框)生成一个匿名的table-row"框. 如果table-row"框的子 C 不是table-cell"，则在 C 和 C 的所有不是table-cell"的连续兄弟周围生成一个匿名的table-cell"框盒子. 生成缺失的父母: 对于连续内部表和table-caption"兄弟序列中的每个table-cell"框 C，如果 C 的父级不是table-row"，则在 C 周围生成一个匿名的table-row"框以及 C 的所有连续兄弟姐妹，即表格单元格"框. 对于连续正确表子项序列中的每个正确表子项 C，如果 C 是错误父级的，则在 C 周围生成一个匿名表"或内联表"框 T 以及 C 的所有连续兄弟项是正确的表子项.(如果 C 的父级是一个内联"框，那么 T 必须是一个内联表"框；否则它必须是一个表"框.) 如果table-row"的父级既不是行组框，也不是table"或inline-table"框，则它的父级是错误的. 如果table-column"框的父级既不是table-column-group"框，也不是table"或inline-table"框，则它的父框是错误的. 如果一个行组框、'table-column-group' 框或 'table-caption' 框的父框既不是一个 'table' 框也不是一个 'inline-table' 框，那么它的父级就是错误的. 现在可以设置 tbody 的高度和溢出.但是包含块规则保持不变:最近的祖先框是块容器或建立格式化上下文" 并且从 9.4.1 块格式上下文我们知道表格单元是块容器并建立块格式上下文: <块引用>浮动、绝对定位元素、块容器(如内嵌块、表格单元和表格标题)不是块框和具有溢出"而不是可见"的块框(除了当该值已传播到视口时)建立新的阻止其内容的格式化上下文. 所以 display:block tbody 的包含块只能是匿名表格单元格框. 百分比高度定义在 10.5 内容高度:'height' 属性，它说: <块引用>百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度...，并且该元素不是绝对定位的，则使用的高度将按照指定的 'auto' 计算. 因此，由于匿名表格单元格没有也不能明确指定其高度，对于 display:block 并以百分比形式指定高度的 tbody，其使用的高度必须为auto，因此从其内容中获取其实际高度. Following is the code for closest positioned ancestors - .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> It works fine. With the same analogy If I try to do that with table - where Table being the container positioned as relatively positioned element. And thead, tbody {display:block} tbody{height:50%; overflow:auto} Here the height:50% works in Chrome but doesn't work in other browsers. Can any one help in how to make it work on other browsers ? Following is the code for the table - I am doing this because I want fixed table headers & scroll able table rows. .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> 解决方案 Let's start with definition of "Containing Block". CSS 2.2 says 10.1 Definition of "containing block" The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way: In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined. Otherwise, the containing block is formed by the padding edge of the ancestor. If there is no such ancestor, the containing block is the initial containing block. In each case, what matters primarily is the contained element, not the containing element. In each of your examples, the contained element is position:static Which means that point 2 above applies. Which is consistent with your tests, because in each case "child1"'s nearest block container ancestor is the relative, absolute, or fixed parent div. A tbody, when it is in its normal display mode of table-row-group participates in a table layout. In this instance, its height is defined by its content rows, and not by reference to any containing block or height value. That's why you can't simply make a tbody scrollable. Setting a tbody to display:block however, means that extra boxes need to be generated to preserve the integrity of the table layout. Anonymous table objects are created like this: <table> {anonymous table-row box} {anonymous table-cell box} <tbody style="display:block"> {anonymous table box} <tr> <td> Note from 17.2.1 Anonymous table objects that this anonymous objects specifically create boxes. Generate missing child wrappers: If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children. If a child C of a row group box is not a 'table-row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes. If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes. Generate missing parents: For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes. For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.) A 'table-row' is misparented if its parent is neither a row group box nor a 'table' or 'inline-table' box. A 'table-column' box is misparented if its parent is neither a 'table-column-group' box nor a 'table' or 'inline-table' box. A row group box, 'table-column-group' box, or 'table-caption' box is misparented if its parent is neither a 'table' box nor an 'inline-table' box. The tbody can now be set with a height and overflow. But the containing block rule remains the same: "the nearest ancestor box that is a block container or which establish a formatting context" And from 9.4.1 Block formatting contexts we know that table-cells are block containers and establish a block formatting context: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. So the containing block of a tbody that is display:block can only be the anonymous table-cell box. Percentage heights are defined in 10.5 Content height: the 'height' property where it says: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly ..., and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. So, since the anonymous table-cell does not and cannot have its height specified explicitly, for a tbody that is display:block and has its specified height as a percentage, its used height must be auto, and therefore obtains its actual height from its content. 这篇关于最近定位祖先宽度&高度不适用于 HTML Tbody的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！查看全文相关文章高度和宽度不适用于跨度？; 为什么宽度/高度不适用于未定位的伪元素?; 分页符不适用于 tbody 问题; 分页符不适用于tbody问题; HTML表格 - 最大宽度不适用于td后代; HTML 表格 - 最大宽度不适用于 td 后代; 文字宽度不适用于跨度; 宽度和高度似乎不适用于:before伪元素之前; HTML不适用于FIREFOX; 固定位置不适用于ipad; Div 100% 高度适用于 Firefox，但不适用于 IE; Div 100％高度适用于Firefox，但不适用于IE; 最大宽度不适用于弹性商品; 高度100％不适用于嵌套div; jqgrid recreateform宽度设置，仅适用于编辑，不适用于添加; jqgrid recreateform 宽度设置，仅适用于编辑，不适用于添加; 定位器不适用于Android 6.0 +; 自动宽度不适用于合并的列; HTML定位标记不适用于Firefox，Safari，iPad和iPhone; 为什么高度100％不适用于内容？; 最小高度100％不适用于内部div; css垂直高度不适用于图像标记; UIScrollView内容插件不适用于键盘高度; 域名不适用于www，但不适用于www; 促销代码不适用于HTML考试; 前端开发最新文章为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; 此请求已被阻止;内容必须通过HTTPS提供; 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; 热门教程 Java教程 Apache ANT 教程 Kali Linux教程 JavaScript教程 JavaFx教程 MFC 教程 Apache HTTP客户端教程 Microsoft Visio 教程热门工具 Java 在线工具 C(GCC) 在线工具 PHP 在线工具 C# 在线工具 Python 在线工具 MySQL 在线工具 VB.NET 在线工具 Lua 在线工具 Oracle 在线工具 C++(GCC) 在线工具 Go 在线工具 Fortran 在线工具登录关闭扫码关注1秒登录发送“验证码”获取 | 15天全站免登陆友情链接： IT屋 Chrome插件谷歌浏览器插件 IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.

最近定位祖先宽度&amp;高度不适用于 HTML Tbody [英] Closest Positioned Ancestor width &amp; height doesn&#39;t work on HTML Tbody

问题描述

Table

10.1 包含块"的定义

10.1 Definition of "containing block"

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

最近定位祖先宽度&高度不适用于 HTML Tbody [英] Closest Positioned Ancestor width & height doesn't work on HTML Tbody

登录关闭