使OpenUI5 BorderLayout适应屏幕尺寸
[英]Fit OpenUI5 BorderLayout to Screensize
问题描述
I am using a small script (full code at the bottom of the question) to create a BorderLayout - top, left, right and center. 
我正在使用一个小的脚本（问题底部的完整代码）来创建BorderLayout-顶部，左侧，右侧和中央。 I fill those parts with sap.ui.commons.layout.BorderLayoutAreas (as shown in this examples .) 我用sap.ui.commons.layout.BorderLayoutAreas填充这些部分（如本示例所示）。
My main problem is that I want this Layout to fit the whole Browser screen, being resized if the broswer windows is resized. 我的主要问题是，我希望此布局适合整个浏览器屏幕，如果调整浏览器窗口的大小，则需要调整其大小。 For that the BorderLayout has the properties width and height for which I set a size. 为此，BorderLayout具有我设置大小的width和height属性。 But it doesn't work as expected. 但是它没有按预期工作。 For example If I replace the width with 100% or auto the application width is always adjusted correctly and fills the browser (in width). 例如，如果我用100%或auto替换宽度，则始终会正确调整应用程序宽度并填充浏览器（宽度）。 For some reason this does not work for the height. 由于某种原因，这对于高度不起作用。 As soon as I enter something different from a pixel value (eg 900px ) all controles dissapear and the window is empty. 一旦输入不同于像素值（例如900px ）的内容，所有900px消失，并且窗口为空。
Am I using it wrong or is there another way to fith the whole application to the screen? 我使用的是错误的还是将整个应用程序安装到屏幕上的另一种方法？
<!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>
2 个解决方案
解决方案1
2 已采纳 2015-05-13 13:14:53
this is a very basic CSS topic and not at all related to UI5: 这是一个非常基本的CSS主题，与UI5完全无关：
In CSS percentage heights only work if the height of the parent element is defined. 在CSS百分比高度中，只有定义了父元素的高度时，高度才有效。 Either as an absolute value, or as a relative value, but the parent of it is absolute-height etc. Elements with no height basically say "I am as tall as my content" and when the content then has 100% height, it says "I am as tall as my parent", so that's a shortcut/deadlock and the height collapses to zero. 要么是绝对值，要么是相对值，但其父级是绝对高度等。没有高度的元素基本上会说“我和内容一样高”，然后当内容具有100％的高度时，它说“我和父母一样高”，所以这是一个捷径/死锁，高度降至零。 Also note that the <html> and <body> root elements also have no fixed height by default, so they also behave the same way. 另请注意，默认情况下<html>和<body>根元素也没有固定的高度，因此它们的行为也相同。
So the easy solution to make 100% height work is to set the height of the parent to a fixed value or to set ALL the parents up to the very root of the page to 100% height - in your example: 因此，使100％的高度正常工作的简单解决方案是将父级的高度设置为固定值，或者将直到页面最底部的所有父级都设置为100％的高度-在您的示例中：
<style> <样式>
html, body, #body { html，body，＃body {
height: 100%; 高度：100％;
} }
<style> <样式>
See jsbin for a running version: http://jsbin.com/bonacohefu/1/edit 有关运行版本，请参见jsbin： http ://jsbin.com/bonacohefu/1/edit
解决方案2
1 2015-05-13 09:49:39
It seems like this is a bug, if you look into the API it says that the default for width and height is 100% but it doesnt seem to work for the height property. 看来这是一个错误，如果您查看API，它会说width和height的默认值为100％，但是似乎对height属性不起作用。
I added it to a test page, and it had the same behavior as your example. 我将其添加到测试页，它的行为与您的示例相同。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.