页脚不会停留在底部

Question

我正在尝试在 Sap Web 上创建一个简单的计划应用程序 IDE，但我遇到了页脚没有留在底部的问题。

指数：

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <link href="https://procensus.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <title>Procensus</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-preload="async"
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-resourceroots='{"zapp_rej_absence": "./", "sap.ui.demo.mock": "mockdata"}'>
    </script>

    <!-- Application launch configuration -->
    <script>

        sap.ui.getCore().attachInit(function() {
        new sap.m.Shell({
            app: new sap.m.App({
                pages: [
                    new sap.m.Page({
                        title: "Procensus Planning Calender",
                        enableScrolling: true,
                        content: [ new sap.ui.core.ComponentContainer({
                            name: "zapp_rej_absence"
                        })]
                    })]
            })
        }).placeAt("content");
    });

    </script>
</head>

<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>

XML:

<mvc:View 
controllerName="zapp_rej_absence.controller.Main" 
xmlns:l="sap.ui.layout"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:commons="sap.ui.commons"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page
    title="{i18n>loginTitle}"
    showHeader="true">
    <content>

        <VBox alignItems="Center" class="sapUiLargeMarginTop">
            <Panel backgroundDesign="Solid"> 
                <Image width="auto" height="10em" id="__image1" src="images/logo/Logo_iQos.jpg" 
                    class="sapUiSmallMargin"/>
                <VBox alignItems="Center" >
                    <Input id="user" type="Text" placeholder="{i18n>userName}"/>
                    <Input id="pass" type="Password" placeholder="{i18n>password}" />
        <Button class="sapUiSmallMarginTop" text="Login" width="17em" type="Emphasized" press="_logIn" submit="_logIn" />   
                </VBox>

            </Panel>
        </VBox>

    </content>
    <footer>
        <Bar>
            <contentLeft>
                <Text text="{version>/version} {version>/pool}" /> <!-- major.minot.micro - major keep at 1 until major re-release , minor - increment on new feature ; micro - increment on bug fix or minor feature change -->   
            </contentLeft>
        </Bar>
    </footer>
</Page>

Final Result - Mine

Result from Loki code

*注意：日历需要（据我所知）在 Panel 标签内，这样它才不会消失。由于面板标签上不存在页脚，我在关闭面板后创建了一个页面标签。

Answer 1

我认为您的 xml-结构有误。如果你这样做，它应该可以工作：

<mvc:View .......
<Page title="Your Title">
<content>
    <!-- your panel with calender here -->
</content>
<footer>
    <!-- your footer code here -->
</footer>

</Page>

</mvc:View>

这里有一个很好的代码示例： https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/code

你可以在这里看到它的样子： https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/code

Answer 2

我做了修改。您需要在视图中绑定您的值，您从模型和 i8nproperties 中获得了什么。我没有值和 i8nproperties，所以将它们留空，但我创建了一个框架，如果它是正确的，你可以参考它。

检查下面三张图：1) index.html 2) view.xml 3)输出

页脚不会停留在底部

Footer doesn't stay at the bottom

xml

sapui5

sap-web-ide