使 OpenUI5 BorderLayout 适合屏幕大小

Question

我正在使用一个小脚本（问题底部的完整代码）来创建 BorderLayout - 顶部、左侧、右侧和中心。我用 sap.ui.commons.layout.BorderLayoutAreas 填充这些部分（如 this examples 所示）

我的主要问题是我希望此布局适合整个浏览器屏幕，如果浏览器 windows 调整大小时也会调整大小。为此，BorderLayout 具有我为其设置大小的属性宽度和高度。但它没有按预期工作。例如，如果我用 100% 或 auto 替换宽度，应用程序宽度始终会正确调整并填充浏览器（宽度）。由于某种原因，这不适用于高度。一旦我输入与像素值不同的内容（例如 900px），所有控件都会消失并且 window 为空。

是我用错了还是有其他方法可以让整个应用程序显示在屏幕上？

<!DOCTYPE html>
<html>
    <meta http_equiv='X-UA-Compatible' content='IE=edge'/>
    <title>OpenUI5 Demo</title>

    <script id='sap-ui-bootstrap'
    src='/js/openui5/resources/sap-ui-core.js'
    data-sap-ui-theme='sap_bluecrystal'
    data-sap-ui-libs='sap.ui.commons'></script>

    <script>
        var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", {
            width : "100%",
            height : "100%", // THE APPLICATION ONLY WORKS WHEN THIS LINE IS SET TO A PIXEL (e. g. "300px") VALUE
            top : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Top Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            bottom : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Bottom Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            begin : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Begin Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            center : new sap.ui.commons.layout.BorderLayoutArea({
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'Center Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            }),
            end : new sap.ui.commons.layout.BorderLayoutArea({
                size : "20%",
                contentAlign : "center",
                visible : true,
                content : [new sap.ui.commons.TextView({
                    text : 'End Area',
                    design : sap.ui.commons.TextViewDesign.Bold
                })]
            })
        });

        oBorderLayout1.placeAt("body");
    </script>

    <body>
        <div id='body'></div>
    </body>
</html>

Answer 1

这似乎是一个错误，如果您查看 API，它会说宽度和高度的默认值是 100%，但它似乎不适用于高度属性。

我将它添加到测试页，它的行为与您的示例相同。

Answer 2

这是一个非常基础的 CSS 主题，与 UI5 完全无关：

在 CSS 中，百分比高度仅在定义了父元素的高度时才有效。要么作为绝对值，要么作为相对值，但它的父项是绝对高度等。没有高度的元素基本上表示 "I am as tall as my content"，当内容具有 100% 高度时，它表示 "I am as tall as my parent"，所以这是一个 shortcut/deadlock，高度折叠为零。另请注意，和根元素在默认情况下也没有固定高度，因此它们的行为方式也相同。

因此，使 100% 高度有效的简单解决方案是将父级的高度设置为固定值，或者将页面最根部的所有父级设置为 100% 高度 - 在您的示例中：

<样式>
html, body, #body {
身高: 100%;
}
<样式>

运行版本见 jsbin： http://jsbin.com/bonacohefu/1/edit

使 OpenUI5 BorderLayout 适合屏幕大小

Fit OpenUI5 BorderLayout to Screensize

javascript

layout

sapui5