Question

我有这个简单的页面，应该显示一个包含顶部，底部和中心区域的边框容器。当你运行它时，内容会短暂出现然后消失。 Firebug没有显示任何错误，我无法看到代码有任何问题。

谢谢你。

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
    <script src="http://js.arcgis.com/3.13/"></script>    
    
    <script >
    var dojoConfig = {    	  
        parseOnLoad: true
    }
    
    require(
	['dijit/layout/BorderContainer', 'dijit/layout/ContentPane',
	"dojo/parser", 
	"dojo/domReady!" ],		
	function(BorderContainer, ContentPane, parser) {	
		parser.parse();
	});
    
    </script>            			       
    </head>

    <body class="claro" style="font-family: Verdana; font-size: 11px;">         	 	
	<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-  props="design:'headline',gutters:false" style="width:100%; height:100%;">         	
    	<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'top'">
    		top
    	</div>

    	<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'bottom'">
    		bottom
    	</div>
    	
    	<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'center'">
    		center
    	</div>    	
  	</div>    		   	
    </body>


</html>

＆＃13;

Answer 1

正如您在下面的屏幕截图中看到的那样 -

我们可以看到contentPane，但它显示内容错误：

所以我猜这种奇怪的行为可能会因为这些窗格的内容而发生。

尝试在其中添加内容，看看您是否在环境中遇到相同的错误或已修复。

Answer 2

我做了更多的研究。修复“data-dojo- props”中不需要的空格并替换为“data-dojo-props”之后，会出现与您在问题中描述的行为相同的行为。

实际上，它看起来像是一个尺寸问题。

边框容器将采用其父级的大小。但是，如果它失败了。它的大小为0，因此一切都在消失。

您首先看到内容，因为尚未加载边框容器。一旦加载，内容就会消失。

在下面的摘要中，我强调borderContainer的父级（此示例中的正文标记）的大小为300px的{{1}}

您可以看到内容保留。

（注意：我还更改了150px以使用斜杠表示法。点符号用于旧的dojo版本。

data-dojo-type

道场内容短暂出现然后消失

2 个答案: