require([ "dojo/on","dojo/dom-style", "dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],function(On, domStyle,ready,registry,BorderContainer,ContentPane){
\t ready(function(){
// apply resize after 3 seconde
window.setTimeout(resizeCenter,3000);
On(window,"resize",function(e){
console.log(e)
\t resizeCenter();
})
})
function resizeCenter(){
\t var centerPane = registry.byId("center").domNode;
parentWidth = domStyle.get(centerPane.parentNode,"width");
parentWidth -=28;
parentHeight = domStyle.get(centerPane.parentNode,"height");
parentHeight -=28;
///why removing 28 because 5*2 margin + 8*2 padding +2*1 borders = 28
//set top left right bottom if all regions are set
domStyle.set(centerPane,"top","5px");
domStyle.set(centerPane,"bottom","5px");
domStyle.set(centerPane,"left","5px");
domStyle.set(centerPane,"right","5px");
domStyle.set(centerPane,"z-index",10);
domStyle.set(centerPane,"width",parentWidth+"px");
domStyle.set(centerPane,"height",parentHeight+"px")
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script>
dojoConfig= {
parseOnLoad: true,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">center</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
</div>
</body>
만 중심이 있거나, 당신은 또한 국경 용기, 그것은 다른 레이아웃이 100 % 너비와 높이 ?? 당신은 더 많은 것을 설명 할 수 있습니까 –
첫 번째 예제를 클릭하면 맨 아래쪽에 선행 및 후행이 있습니다. 나는 중심 지역에 id = "center"를 준다. 그것이 전체 화면으로 확장하고 싶습니다. 예제 버전에서 센터는 약 500 픽셀 또는 50 %이며 시작할 100 % 너비가 아닙니다. 100 % 너비로 만들면 변경되지 않는 것 같습니다. – techdog
어쩌면 [dojo/dom-style] (https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html#set) 도움이 될까요? – barbsan