Css sap.ui.table.table:visibleRowCountMode="；“自动”；不使用VBox（FlexBox）

我希望我的

sap.ui.table.table

的行数适合屏幕高度。我尝试使用

visibleRowCountMode=“Auto”

来实现这一点，但在一开始，它没有起作用，因为某些父元素没有

height=“100%”

我的表嵌套在几个

页面和
FlexBox
es中，但我的视图就是这样的



我还将此添加到我的CSS文件中：

html，正文{
身高：100%；
}

根据其他问题，这似乎是解决办法，但对我不起作用。我发现，在DOM中，表控件（由UI5自动创建，似乎不属于视图中声明的任何元素）的直接父级是问题所在，因为它没有样式
高度：100%

这是Chrome开发工具中的DOM（黄色是我的表，红色是没有任何高度的div）：


如果我手动向元素添加高度，则
visibleRowCountMode=“Auto”
可以正常工作

所以我找到了一个相当丑陋的解决方法，我希望任何人都知道一个更好的方法来克服这个问题。加载
视图时，我选择表的父
元素，并在控制器的
onAfterRendering
中以编程方式设置其高度

onAfterRendering:function（）{
const-oTable=this.byId（“idTable”）；
const oHTMLElement=document.getElementById（oTable.getIdForLabel（））；
oHTMLElement.parentNode.style.height=“100%”；
}

由于这只是一个解决办法，我想知道真正的问题在哪里，是否有人能帮我解决它。
这里是一个工作示例：
我还包含了
Text
element，因此您可以根据每个框中有多少子元素来了解应如何应用样式

主要的是，在创建VBox/HBox时，默认情况下，它将UI控件包装在另一个
div
元素中。因此，不仅Box元素必须将其高度设置为100%，还必须将此Box元素的“项”设置为100%

另一个选项是更改属性
renderType=“Bare”
，然后再次使用样式

另外，很抱歉我的造型（仍在学习stackoverflow）


.VBOX3{
身高：100%
}
.VBOX3 div:类型的第一个{
身高：100%
}
.VBox2{
身高：100%
}
.HBox1{
身高：100%
}
.VBOX1{
身高：100%
}
.VBOX1>div{
身高：100%
}
以下是一个工作示例：
我还包含了
Text
element，因此您可以根据每个框中有多少子元素来了解应如何应用样式

主要的是，在创建VBox/HBox时，默认情况下，它将UI控件包装在另一个
div
元素中。因此，不仅Box元素必须将其高度设置为100%，还必须将此Box元素的“项”设置为100%

另一个选项是更改属性
renderType=“Bare”
，然后再次使用样式

另外，很抱歉我的造型（仍在学习stackoverflow）


.VBOX3{
身高：100%
}
.VBOX3 div:类型的第一个{
身高：100%
}
.VBox2{
身高：100%
}
.HBox1{
身高：100%
}
.VBOX1{
身高：100%
}
.VBOX1>div{
身高：100%
}
尝试将
renderType=“Bare”
添加到所有相关的FlexBox。从API参考中：

确定布局呈现为一系列div还是无序列表（ul）

我们建议在大多数情况下使用
Bare
，以避免由于浏览器不一致而导致的布局问题

及

UI5控件不是包装在附加的HTML元素中

也就是说，表格的父元素应该是高度为100%的VBox元素，中间不包含div元素。
尝试将
renderType=“Bare”
添加到所有相关的FlexBox中。从API参考中：

确定布局呈现为一系列div还是无序列表（ul）

我们建议在大多数情况下使用
Bare
，以避免由于浏览器不一致而导致的布局问题

及

UI5控件不是包装在附加的HTML元素中

也就是说，表格的父级应该是高度为100%的VBox元素，中间没有div元素。
属性
visibleRowCountMode
和
“Auto”
要求，如果表格在FlexBox（
VBox
）中呈现，则允许表格增长。这可以通过将
作为表格的附加布局数据来实现：



从：


该表必须在其父DOM元素中不包含同级。唯一的例外是父元素是CSS flex容器，而表是允许增长和收缩的CSS flex项


下面是一个小演示：


sap.ui.getCore（）.attachInit（（）=>sap.ui.require([
“sap/ui/core/Fragment”，
“sap/ui/model/json/JSONModel”，//示例模型
]，异步（片段，模型）=>{
“使用圣
<mvc:View
   controllerName="sap.ui.sample.App"
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:table="sap.ui.table">
   <App>
      <Page>
         <content>
            <VBox class="sapUiTinyMarginBegin VBOX3">            
               <l:Splitter id="CSL_idSplitter" height="100%" resize="onSplitterResize">
                  <VBox class="VBox2">
                     <HBox justifyContent="SpaceBetween" class="HBox1">
                        <VBox class="VBOX1">
                           <table:Table 
                              id="idTable"
                              height="100%"
                              visibleRowCountMode="Auto"
                              fixedBottomRowCount="1"/>
                        </VBox>
                     </HBox>
                  </VBox>
               </l:Splitter>
               <Text text="Hello"/>            
            </VBox>
         </content>
      </Page>
   </App>
</mvc:View>

.VBOX3{
  height: 100% 
}

.VBOX3 div:first-of-type{
  height: 100% 
}

.VBox2{
    height:100%
}

.HBox1{
    height: 100%
}

.VBOX1{
  height: 100% 
}

.VBOX1 > div{
  height: 100% 
}