適合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到屏幕尺寸

回答

相關問題