使OpenUI5 BorderLayout适应屏幕尺寸
[英]Fit OpenUI5 BorderLayout to Screensize
问题描述
我正在使用一个小的脚本（问题底部的完整代码）来创建BorderLayout-顶部，左侧，右侧和中央。 我用sap.ui.commons.layout.BorderLayoutAreas填充这些部分（如本示例所示）。
我的主要问题是，我希望此布局适合整个浏览器屏幕，如果调整浏览器窗口的大小，则需要调整其大小。 为此，BorderLayout具有我设置大小的width和height属性。 但是它没有按预期工作。 例如，如果我用100%或auto替换宽度，则始终会正确调整应用程序宽度并填充浏览器（宽度）。 由于某种原因，这对于高度不起作用。 一旦输入不同于像素值（例如900px ）的内容，所有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>
2 个解决方案
解决方案1
2 已采纳 2015-05-13 13:14:53
这是一个非常基本的CSS主题，与UI5完全无关：
在CSS百分比高度中，只有定义了父元素的高度时，高度才有效。 要么是绝对值，要么是相对值，但其父级是绝对高度等。没有高度的元素基本上会说“我和内容一样高”，然后当内容具有100％的高度时，它说“我和父母一样高”，所以这是一个捷径/死锁，高度降至零。 另请注意，默认情况下<html>和<body>根元素也没有固定的高度，因此它们的行为也相同。
因此，使100％的高度正常工作的简单解决方案是将父级的高度设置为固定值，或者将直到页面最底部的所有父级都设置为100％的高度-在您的示例中：
<样式>
html，body，＃body {
高度：100％;
}
<样式>
有关运行版本，请参见jsbin： http ://jsbin.com/bonacohefu/1/edit
解决方案2
1 2015-05-13 09:49:39
看来这是一个错误，如果您查看API，它会说width和height的默认值为100％，但是似乎对height属性不起作用。
我将其添加到测试页，它的行为与您的示例相同。
OpenUI5中的绑定和关系
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.