Question

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

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

我使用它是错误的还是有另一种方法将整个应用程序用于屏幕？

<!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

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

在CSS百分比高度仅在定义父元素的高度时才有效。作为绝对值，或作为相对值，但它的父亲是绝对高度等。没有高度的元素基本上说＆＃34;我和我的内容一样高＃34;当内容的高度为100％时，它表示＆＃34;我和我的父母一样高＃34;因此，这是一个快捷方式/死锁，高度坍塌为零。另请注意＆lt; html＆gt;和＆lt; body＆gt;默认情况下，根元素也没有固定的高度，因此它们的行为方式也相同。

因此，使100％高度工作的简单解决方案是将父级的高度设置为固定值，或者将所有父级的父级设置为100％的高度 - 在您的示例中：

＆LT;风格＆GT;
html，body，＃body {
height：100％;
}
＆LT;风格＆GT;

有关正在运行的版本，请参阅jsbin： http://jsbin.com/bonacohefu/1/edit

Answer 2

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

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

使OpenUI5 BorderLayout适合Screensize

2 个答案: