适合OpenUI5 BorderLayout到屏幕尺寸

我正在使用一个小脚本（问题底部的完整代码）来创建一个BorderLayout - 顶部，左侧，右侧和中心。我充满sap.ui.commons.layout.BorderLayoutAreas的部分（如图this examples。）适合OpenUI5 BorderLayout到屏幕尺寸

我的主要问题是，我想这个布局，以适应整个浏览器屏幕，如果broswer窗口大小调整被调整。为此，BorderLayout具有为其设置大小的属性宽度和高度。但它不能按预期工作。例如，如果我用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>

来源

2015-05-12 ap0

这是一个非常基本的CSS的话题，而不是在所有涉及到UI5：

在CSS百分比高度只有父元素的高度定义工作。无论是作为绝对值还是作为相对值，但其父母都是绝对高度等。没有高度的元素基本上会说“我和我的内容一样高”，并且当内容具有100％的高度时，它说：“我和我父母一样高”，所以这是一个捷径/僵局，高度倒塌为零。另请注意，< html>和< body>根元素默认情况下也没有固定高度，因此它们的行为方式也是相同的。

因此，使100％身高工作的简单方法是将父母的高度设置为固定值，或将所有父母的页面高度设置为100％，例如：

<样式>
html，body，#body {
height：100％;
}
<风格>

查看正在运行的版本jsbin： http://jsbin.com/bonacohefu/1/edit

来源

2015-05-13 13:14:53 akudev

其实你的答案是完全合理的，它甚至在我的脑海中。但是当我测试它时，它仍然没有工作。非常感谢 –

好像这是一个错误，如果你看看API它说，宽度和高度的默认值是100％，但它似乎没有为height属性工作。

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

来源

2015-05-13 09:49:39

谢谢。我将在OpenUI5 Github Page上尝试运气，并将其作为一个问题归档。 – ap0

是的，那是（y） –

适合OpenUI5 BorderLayout到屏幕尺寸

回答

相关问题