SAPUI5 页脚未显示在正确的位置

Question

我对页面的设计有疑问。我无法使 header 和页脚在所有分辨率下都显示正确。我有一个主要的应用程序视图，它处理路由并将所需的视图放置到内容中。

<mvc:View xmlns:mvc="sap.ui.core.mvc"   xmlns="sap.m" heigh="100%" displayBlock="true"
      controllerName="demo_pcm.App" >

<Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>products}">
    <headerContent>
<IconTabBar
        expanded="false"
        id="idIconTabBar"
        select="handleIconTabBarSelect"
        expandable="false"
        applyContentPadding="false"
        headerMode="Inline"
        visible="{viewModel>/visible}"
       >
    <items>
        <IconTabFilter

                icon="sap-icon://begin"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP1"
                key="STEP1" />
        <IconTabSeparator icon="sap-icon://open-command-field" />
        <IconTabFilter
                icon="sap-icon://survey"
                iconColor="Neutral"
                design="Horizontal"
                text="STEP2"
                key="STEP2"
        />


    </items>
</IconTabBar></headerContent>

    <content >
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
    </content>
</Page>

基于 URL，我正在向应用程序本身插入其他视图。这里是我的设计问题 comes.If 我使用 header 内容并将 icontabbar 放在那里（这个 icontabbar 应该在每个子视图上重复，这就是我放在 app.view 中的原因）这是它的样子； header cannot be seen clearly

如果我只是删除页面控件或不在 app.view 中使用，而只是将图标栏本身放在控件的正上方，则效果很好。我希望我的 icontabbar 始终保持 header，这就是为什么我试图将其包含在 header 内容中。另一个问题是页脚。从路由器加载第一个视图后，如果不向下滚动，我将看不到页脚。我需要向下滚动才能查看或将视图高度设置为 90%。这就是它的样子； missing footer

在图片的右边你会看到另一个滚动条，这是由于页面振动（不知何故它在 chrome 中晃动，我把下面的代码放在 css 中）

html{ overflow-y: scroll;}

从 app.view 如果我插入滚动容器并将高度设置为 90%，它工作正常但它在更高的分辨率下位置更高。（所以在 4k 分辨率下它看起来很奇怪）

  <ScrollContainer
        height="90%"
        width="100%"
        horizontal="false"
        vertical="true">
<App id="app" >
    <!-- pages will be filled automatically via routing -->
</App>
</ScrollContainer>

这是现在的样子（没有 app.view 和高度为 90% 的滚动容器（可以看到页脚，但你可以看到底部的白线，它在更高的分辨率下变得更大）（Whosebug 不允许我 post 3 个链接 :/)

这是我的index.html

 <script>
    sap.ui.localResources("demo_pcm");
    sap.ui.localResources("util");
    sap.ui.localResources("i18n");
    var oModel = "";
    sap.ui.getCore().attachInit(function() {
        sap.ui.require([
            "sap/m/Shell",
            "sap/ui/core/ComponentContainer",
            "demo_pcm/Component"
        ], function(Shell, ComponentContainer, Component) {

                app: new ComponentContainer({
                    height:"100%",
                    component: new Component({
                        id: "mvcAppComponent"
                    })
                }).placeAt("content");
        }); });



</script>

问题出在哪里？我快要失去理智了。我试过浮动页脚但同样的问题。我应该在页脚之前将我的滚动容器包含在子视图本身中吗？

Answer 1

如果您愿意接受一些 CSS 解决方法，这里有一个快速解决方法：在不同的分辨率下，工具栏的高度似乎固定在 125 像素左右（包括填充）。你可以根据这个设置App容器的高度。

XML

<App id="app" class="adjustedHeight">

CSS

.adjustedHeight{
    height: calc(100% - 125px) !important;
}

注意：这不是最佳解决方案。如果我找到更好的，我会更新这个答案

SAPUI5 页脚未显示在正确的位置

SAPUI5 Page Footer doesn't show in correct place

xml

sapui5

sap-fiori